diff --git a/docs/add-modal-examples/01-get-started/installation.html b/docs/add-modal-examples/01-get-started/installation.html
index 7b8a94e6b8..b280c0799d 100644
--- a/docs/add-modal-examples/01-get-started/installation.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"16f:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Installation\"}],\"Willkommen in der Flow Dokumentation!\",\"$undefined\"]}],[\"$\",\"$L16e\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$16f\",\"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/add-modal-examples/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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"16f:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Installation\"}],\"Willkommen in der Flow Dokumentation!\",\"$undefined\"]}],[\"$\",\"$L16e\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$16f\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/01-get-started/installation.txt b/docs/add-modal-examples/01-get-started/installation.txt
index d672f9131c..36e9caf026 100644
--- a/docs/add-modal-examples/01-get-started/installation.txt
+++ b/docs/add-modal-examples/01-get-started/installation.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","01-get-started/installation","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1104,7 +1104,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1319,9 +1319,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3171,7 +3169,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3386,9 +3384,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/01-get-started/stylesheet.html b/docs/add-modal-examples/01-get-started/stylesheet.html
index f30df877d7..0395410d1f 100644
--- a/docs/add-modal-examples/01-get-started/stylesheet.html
+++ b/docs/add-modal-examples/01-get-started/stylesheet.html
@@ -83,4 +83,4 @@ <h4 class="flow--heading flow--heading--h4">In einer Komposition verwendete Komp
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">    senden zu können musst du die Adresse wieder umbenennen.</span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text">  </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">div</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token plain-text"></span>
 </span><span class="token-line" style="color:#000000"><span class="token plain-text"></span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;/</span><span class="token tag" style="color:rgb(128, 0, 0)">aside</span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span>
-</span></pre></div></div><div class="LiveCodeEditor_actions__nErUJ"><button type="button" class="flow--button flow--button--size-s flow--button--secondary flow--button--plain LiveCodeEditor_toggleCode__l23c6" data-rac=""><span class="flow--button--content">Code ausblenden</span></button></div></div></div></div></div></main></div><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"16f:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Stylesheet\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L16e\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$16f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-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/add-modal-examples/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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"16f:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Stylesheet\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L16e\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$16f\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/01-get-started/stylesheet.txt b/docs/add-modal-examples/01-get-started/stylesheet.txt
index 4a455d762d..dc5ced92d0 100644
--- a/docs/add-modal-examples/01-get-started/stylesheet.txt
+++ b/docs/add-modal-examples/01-get-started/stylesheet.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","01-get-started/stylesheet","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1104,7 +1104,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1319,9 +1319,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3171,7 +3169,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3386,9 +3384,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/02-foundations/content-guidelines/fehlermeldungen.html b/docs/add-modal-examples/02-foundations/content-guidelines/fehlermeldungen.html
index 33383486d4..6259b4c8a7 100644
--- a/docs/add-modal-examples/02-foundations/content-guidelines/fehlermeldungen.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"16f:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Fehlermeldungen\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L16e\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$16f\",\"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/add-modal-examples/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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"16f:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Fehlermeldungen\"}],\"$undefined\",\"$undefined\"]}],[\"$\",\"$L16e\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$16f\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/02-foundations/content-guidelines/fehlermeldungen.txt b/docs/add-modal-examples/02-foundations/content-guidelines/fehlermeldungen.txt
index c3bdf7128c..ed5d9254d5 100644
--- a/docs/add-modal-examples/02-foundations/content-guidelines/fehlermeldungen.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1104,7 +1104,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1319,9 +1319,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3171,7 +3169,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3386,9 +3384,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/actions/action-group.html b/docs/add-modal-examples/03-components/actions/action-group.html
index bf1b370e3a..bb8b05d329 100644
--- a/docs/add-modal-examples/03-components/actions/action-group.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>ActionGroup</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" 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/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ActionGroup\"}],\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ActionGroup\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" 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/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ActionGroup\"}],\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ActionGroup\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/actions/action-group.txt b/docs/add-modal-examples/03-components/actions/action-group.txt
index 90af1eff1a..bdde0c2c46 100644
--- a/docs/add-modal-examples/03-components/actions/action-group.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/actions/action.html b/docs/add-modal-examples/03-components/actions/action.html
index 6e016aface..f13af7ba80 100644
--- a/docs/add-modal-examples/03-components/actions/action.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Action</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171: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;\n175: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,"176: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Action\"}],\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"confirmation\":\"$176\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171: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;\n175: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,"176: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Action\"}],\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Action\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"confirmation\":\"$176\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/actions/action.txt b/docs/add-modal-examples/03-components/actions/action.txt
index 6e5db08130..8be20a87b1 100644
--- a/docs/add-modal-examples/03-components/actions/action.txt
+++ b/docs/add-modal-examples/03-components/actions/action.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/actions/action","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/actions/button.html b/docs/add-modal-examples/03-components/actions/button.html
index ca6aa41c37..3875589bca 100644
--- a/docs/add-modal-examples/03-components/actions/button.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Button</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Button\"}],\"Der Button dient zum Ausführen von Aktionen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Button\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Button\"}],\"Der Button dient zum Ausführen von Aktionen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Button\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/actions/button.txt b/docs/add-modal-examples/03-components/actions/button.txt
index 4f47bc911f..8d0d355b26 100644
--- a/docs/add-modal-examples/03-components/actions/button.txt
+++ b/docs/add-modal-examples/03-components/actions/button.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/actions/button","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/actions/context-menu.html b/docs/add-modal-examples/03-components/actions/context-menu.html
index 4390d02005..faf4ec2595 100644
--- a/docs/add-modal-examples/03-components/actions/context-menu.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>ContextMenu</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ContextMenu\"}],\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ContextMenu\"}],\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ContextMenu\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/actions/context-menu.txt b/docs/add-modal-examples/03-components/actions/context-menu.txt
index 4f381ef33b..12be6e2c84 100644
--- a/docs/add-modal-examples/03-components/actions/context-menu.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/actions/copy-button.html b/docs/add-modal-examples/03-components/actions/copy-button.html
index 27061ad04a..2acb05241f 100644
--- a/docs/add-modal-examples/03-components/actions/copy-button.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>CopyButton</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CopyButton\"}],\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CopyButton\"}],\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CopyButton\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/actions/copy-button.txt b/docs/add-modal-examples/03-components/actions/copy-button.txt
index e475db3482..6a1da06416 100644
--- a/docs/add-modal-examples/03-components/actions/copy-button.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/avatar.html b/docs/add-modal-examples/03-components/content/avatar.html
index 30ff04d794..4ba7a8c2af 100644
--- a/docs/add-modal-examples/03-components/content/avatar.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Avatar</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" 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/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-4"><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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Avatar\"}],\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" 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/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-4"><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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Avatar\"}],\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Avatar\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/avatar.txt b/docs/add-modal-examples/03-components/content/avatar.txt
index 28e052c668..8057732ce0 100644
--- a/docs/add-modal-examples/03-components/content/avatar.txt
+++ b/docs/add-modal-examples/03-components/content/avatar.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/avatar","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/heading.html b/docs/add-modal-examples/03-components/content/heading.html
index 0abb697acb..e66980d659 100644
--- a/docs/add-modal-examples/03-components/content/heading.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Heading</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Heading\"}],\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Heading\"}],\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Heading\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/heading.txt b/docs/add-modal-examples/03-components/content/heading.txt
index d7907ad014..0a5bbcf975 100644
--- a/docs/add-modal-examples/03-components/content/heading.txt
+++ b/docs/add-modal-examples/03-components/content/heading.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/heading","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/icon.html b/docs/add-modal-examples/03-components/content/icon.html
index 8af3a8ac99..f88b3e2c59 100644
--- a/docs/add-modal-examples/03-components/content/icon.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Icon</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n175:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"172:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"176: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,"177:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"178:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Icon\"}],\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"functional\":\"$172\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":[[\"$\",\"$L175\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$176\",\"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\":\"$177\",\"functional\":\"$178\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n175:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"172:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"176: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,"177:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"178:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Icon\"}],\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Icon\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"functional\":\"$172\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":[[\"$\",\"$L175\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$176\",\"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\":\"$177\",\"functional\":\"$178\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/icon.txt b/docs/add-modal-examples/03-components/content/icon.txt
index b54d74677d..191bdce914 100644
--- a/docs/add-modal-examples/03-components/content/icon.txt
+++ b/docs/add-modal-examples/03-components/content/icon.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/icon","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/illustrated-message.html b/docs/add-modal-examples/03-components/content/illustrated-message.html
index 040577fee2..6e2d1515f1 100644
--- a/docs/add-modal-examples/03-components/content/illustrated-message.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>IllustratedMessage</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"IllustratedMessage\"}],\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"IllustratedMessage\"}],\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/IllustratedMessage\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/illustrated-message.txt b/docs/add-modal-examples/03-components/content/illustrated-message.txt
index 4949ca62fc..7be93a7265 100644
--- a/docs/add-modal-examples/03-components/content/illustrated-message.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/image.html b/docs/add-modal-examples/03-components/content/image.html
index 45401152ec..41f3e7f5b3 100644
--- a/docs/add-modal-examples/03-components/content/image.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Image</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Image\"}],\"Mit der Image-Komponente können Bilder angezeigt werden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Image\"}],\"Mit der Image-Komponente können Bilder angezeigt werden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Image\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/image.txt b/docs/add-modal-examples/03-components/content/image.txt
index 6de9c05d5a..1a5ac483c6 100644
--- a/docs/add-modal-examples/03-components/content/image.txt
+++ b/docs/add-modal-examples/03-components/content/image.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/image","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/inline-code.html b/docs/add-modal-examples/03-components/content/inline-code.html
index f98d3aee02..bb002bdbc1 100644
--- a/docs/add-modal-examples/03-components/content/inline-code.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>InlineCode</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"InlineCode\"}],\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"InlineCode\"}],\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineCode\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/inline-code.txt b/docs/add-modal-examples/03-components/content/inline-code.txt
index 641fd8ba73..d46aaf8d88 100644
--- a/docs/add-modal-examples/03-components/content/inline-code.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/label.html b/docs/add-modal-examples/03-components/content/label.html
index 8358647cc9..2ef377d083 100644
--- a/docs/add-modal-examples/03-components/content/label.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Label</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Label\"}],\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Label\"}],\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Label\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/label.txt b/docs/add-modal-examples/03-components/content/label.txt
index d06126babe..3968ba2dd7 100644
--- a/docs/add-modal-examples/03-components/content/label.txt
+++ b/docs/add-modal-examples/03-components/content/label.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/label","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/labeled-value.html b/docs/add-modal-examples/03-components/content/labeled-value.html
index 872b446ff2..29eab89052 100644
--- a/docs/add-modal-examples/03-components/content/labeled-value.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>LabeledValue</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LabeledValue\"}],\"Ein LabeledValue zeigt eine Information mit einem Label an.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LabeledValue\"}],\"Ein LabeledValue zeigt eine Information mit einem Label an.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LabeledValue\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/labeled-value.txt b/docs/add-modal-examples/03-components/content/labeled-value.txt
index afb57b6556..1a4e0d4cbd 100644
--- a/docs/add-modal-examples/03-components/content/labeled-value.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/skeleton.html b/docs/add-modal-examples/03-components/content/skeleton.html
index 9f8d8dd8ac..cddfd9443d 100644
--- a/docs/add-modal-examples/03-components/content/skeleton.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Skeleton</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Skeleton\"}],\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Skeleton\"}],\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Skeleton\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/skeleton.txt b/docs/add-modal-examples/03-components/content/skeleton.txt
index 1fea90b15c..989a1ebd0b 100644
--- a/docs/add-modal-examples/03-components/content/skeleton.txt
+++ b/docs/add-modal-examples/03-components/content/skeleton.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/skeleton","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/content/text.html b/docs/add-modal-examples/03-components/content/text.html
index d2735ca021..30a9aa09c6 100644
--- a/docs/add-modal-examples/03-components/content/text.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Text</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Text\"}],\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Text\"}],\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Text\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/content/text.txt b/docs/add-modal-examples/03-components/content/text.txt
index b9b76c6a2b..4bae49c54d 100644
--- a/docs/add-modal-examples/03-components/content/text.txt
+++ b/docs/add-modal-examples/03-components/content/text.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/content/text","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/checkbox-button.html b/docs/add-modal-examples/03-components/form-controls/checkbox-button.html
index 7d671b06c5..883aab1390 100644
--- a/docs/add-modal-examples/03-components/form-controls/checkbox-button.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>CheckboxButton</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" 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/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CheckboxButton\"}],\"Der CheckboxButton verhält sich wie eine Checkbox.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" 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/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CheckboxButton\"}],\"Der CheckboxButton verhält sich wie eine Checkbox.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxButton\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/checkbox-button.txt b/docs/add-modal-examples/03-components/form-controls/checkbox-button.txt
index 16ef5cf544..278b7e9336 100644
--- a/docs/add-modal-examples/03-components/form-controls/checkbox-button.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/checkbox-group.html b/docs/add-modal-examples/03-components/form-controls/checkbox-group.html
index 01233b69a8..a7bc696335 100644
--- a/docs/add-modal-examples/03-components/form-controls/checkbox-group.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>CheckboxGroup</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" aria-describedby="react-aria-:R1j7rqjaH3: react-aria-:R1j7rqjaH4:" class="flow--form-field" data-rac=""><span class="flow--label flow--form-field--label" id="react-aria-:R1j7rqjaH1:">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-:R1j7rqjaH3:" 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-:R1j7rqjaH3:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CheckboxGroup\"}],\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" aria-describedby="react-aria-:R1j7rqjaH3: react-aria-:R1j7rqjaH4:" class="flow--form-field" data-rac=""><span class="flow--label flow--form-field--label" id="react-aria-:R1j7rqjaH1:">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-:R1j7rqjaH3:" 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-:R1j7rqjaH3:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CheckboxGroup\"}],\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CheckboxGroup\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/checkbox-group.txt b/docs/add-modal-examples/03-components/form-controls/checkbox-group.txt
index 13b3a39c6f..c064aa3b3d 100644
--- a/docs/add-modal-examples/03-components/form-controls/checkbox-group.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/checkbox.html b/docs/add-modal-examples/03-components/form-controls/checkbox.html
index 6b745e0462..355e38eaa7 100644
--- a/docs/add-modal-examples/03-components/form-controls/checkbox.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Checkbox</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Checkbox\"}],\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Checkbox\"}],\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Checkbox\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/checkbox.txt b/docs/add-modal-examples/03-components/form-controls/checkbox.txt
index a09ae09415..8b1d79a30c 100644
--- a/docs/add-modal-examples/03-components/form-controls/checkbox.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/number-field.html b/docs/add-modal-examples/03-components/form-controls/number-field.html
index b4ca0b29b3..aadfb81cd0 100644
--- a/docs/add-modal-examples/03-components/form-controls/number-field.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>NumberField</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqjaH7:" type="button" tabindex="-1" aria-label="Decrease" aria-labelledby="react-aria-:R1j7rqjaH7: react-aria-:R1j7rqjaH2:" aria-controls="react-aria-:R1j7rqja:" 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-:R1j7rqjaH2:" id="react-aria-:R1j7rqja:" type="text" autoComplete="off" inputMode="numeric" aria-describedby="react-aria-:R1j7rqjaH4: react-aria-:R1j7rqjaH5:" aria-roledescription="Number field" autoCorrect="off" spellCheck="false" class="flow--number-field--input" data-rac="" value=""/><button id="react-aria-:R1j7rqjaH6:" type="button" tabindex="-1" aria-label="Increase" aria-labelledby="react-aria-:R1j7rqjaH6: react-aria-:R1j7rqjaH2:" aria-controls="react-aria-:R1j7rqja:" 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-:R1j7rqjaH2:" for="react-aria-:R1j7rqja:">Alter<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R1j7rqjaH4:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"NumberField\"}],\"Das NumberField dient der Eingabe von Zahlen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqjaH7:" type="button" tabindex="-1" aria-label="Decrease" aria-labelledby="react-aria-:R1j7rqjaH7: react-aria-:R1j7rqjaH2:" aria-controls="react-aria-:R1j7rqja:" 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-:R1j7rqjaH2:" id="react-aria-:R1j7rqja:" type="text" autoComplete="off" inputMode="numeric" aria-describedby="react-aria-:R1j7rqjaH4: react-aria-:R1j7rqjaH5:" aria-roledescription="Number field" autoCorrect="off" spellCheck="false" class="flow--number-field--input" data-rac="" value=""/><button id="react-aria-:R1j7rqjaH6:" type="button" tabindex="-1" aria-label="Increase" aria-labelledby="react-aria-:R1j7rqjaH6: react-aria-:R1j7rqjaH2:" aria-controls="react-aria-:R1j7rqja:" 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-:R1j7rqjaH2:" for="react-aria-:R1j7rqja:">Alter<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R1j7rqjaH4:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"NumberField\"}],\"Das NumberField dient der Eingabe von Zahlen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/NumberField\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/number-field.txt b/docs/add-modal-examples/03-components/form-controls/number-field.txt
index 7334a4e28d..b936d72f7c 100644
--- a/docs/add-modal-examples/03-components/form-controls/number-field.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/radio-group.html b/docs/add-modal-examples/03-components/form-controls/radio-group.html
index a758f58f93..8cab088436 100644
--- a/docs/add-modal-examples/03-components/form-controls/radio-group.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>RadioGroup</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" aria-describedby="react-aria-:R1j7rqjaH3: react-aria-:R1j7rqjaH4:" class="flow--form-field" data-rac="" data-orientation="vertical"><span class="flow--label flow--form-field--label" id="react-aria-:R1j7rqjaH1:">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-:R1j7rqjaH3:" name="react-aria-:R1j7rqjaH5:" 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-:R1j7rqjaH3:" name="react-aria-:R1j7rqjaH5:" 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-:R1j7rqjaH3:" name="react-aria-:R1j7rqjaH5:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"RadioGroup\"}],\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" aria-describedby="react-aria-:R1j7rqjaH3: react-aria-:R1j7rqjaH4:" class="flow--form-field" data-rac="" data-orientation="vertical"><span class="flow--label flow--form-field--label" id="react-aria-:R1j7rqjaH1:">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-:R1j7rqjaH3:" name="react-aria-:R1j7rqjaH5:" 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-:R1j7rqjaH3:" name="react-aria-:R1j7rqjaH5:" 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-:R1j7rqjaH3:" name="react-aria-:R1j7rqjaH5:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"RadioGroup\"}],\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/RadioGroup\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/radio-group.txt b/docs/add-modal-examples/03-components/form-controls/radio-group.txt
index 85dab5eb7c..6305181795 100644
--- a/docs/add-modal-examples/03-components/form-controls/radio-group.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/select.html b/docs/add-modal-examples/03-components/form-controls/select.html
index 49c506615c..644176eb4c 100644
--- a/docs/add-modal-examples/03-components/form-controls/select.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Select</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R2kpj7rqja:" role="dialog" tabindex="-1" class="flow--popover--content"></section></template><div class="flow--select flow--form-field" data-rac=""><button id="react-aria-:R1j7rqjaH2:" type="button" aria-labelledby="react-aria-:R1j7rqjaH7: react-aria-:R1j7rqjaH3:" aria-describedby="react-aria-:R1j7rqjaH5: react-aria-:R1j7rqjaH6:" aria-haspopup="listbox" aria-expanded="false" class="flow--select--toggle" data-rac=""><span id="react-aria-:R1j7rqjaH7:" 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-:R1j7rqjaH3:">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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Select\"}],\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R2kpj7rqja:" role="dialog" tabindex="-1" class="flow--popover--content"></section></template><div class="flow--select flow--form-field" data-rac=""><button id="react-aria-:R1j7rqjaH2:" type="button" aria-labelledby="react-aria-:R1j7rqjaH7: react-aria-:R1j7rqjaH3:" aria-describedby="react-aria-:R1j7rqjaH5: react-aria-:R1j7rqjaH6:" aria-haspopup="listbox" aria-expanded="false" class="flow--select--toggle" data-rac=""><span id="react-aria-:R1j7rqjaH7:" 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-:R1j7rqjaH3:">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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Select\"}],\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Select\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/select.txt b/docs/add-modal-examples/03-components/form-controls/select.txt
index 57a773e0e3..35cf771e09 100644
--- a/docs/add-modal-examples/03-components/form-controls/select.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/slider.html b/docs/add-modal-examples/03-components/form-controls/slider.html
index 53e8ab1b2f..c652c9da7f 100644
--- a/docs/add-modal-examples/03-components/form-controls/slider.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Slider</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" class="flow--slider" data-rac="" data-orientation="horizontal"><div class="flow--slider--text"><output for="react-aria-:R1j7rqjaH1:-0" aria-live="off" class="flow--slider--value" data-rac="" data-orientation="horizontal">200 GB</output><label id="react-aria-:R1j7rqjaH1:">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-:R1j7rqjaH1:-0" aria-labelledby="react-aria-:Rb9j7rqjaH1: react-aria-:R1j7rqjaH1:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Slider\"}],\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Slider\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" class="flow--slider" data-rac="" data-orientation="horizontal"><div class="flow--slider--text"><output for="react-aria-:R1j7rqjaH1:-0" aria-live="off" class="flow--slider--value" data-rac="" data-orientation="horizontal">200 GB</output><label id="react-aria-:R1j7rqjaH1:">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-:R1j7rqjaH1:-0" aria-labelledby="react-aria-:Rb9j7rqjaH1: react-aria-:R1j7rqjaH1:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Slider\"}],\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Slider\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/slider.txt b/docs/add-modal-examples/03-components/form-controls/slider.txt
index e4b3c2df65..d5138fea95 100644
--- a/docs/add-modal-examples/03-components/form-controls/slider.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/switch.html b/docs/add-modal-examples/03-components/form-controls/switch.html
index a2b0e9b142..6a6a8ec526 100644
--- a/docs/add-modal-examples/03-components/form-controls/switch.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Switch</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Switch\"}],\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Switch\"}],\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Switch\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/switch.txt b/docs/add-modal-examples/03-components/form-controls/switch.txt
index abc1c7698b..d974ecffa5 100644
--- a/docs/add-modal-examples/03-components/form-controls/switch.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/text-area.html b/docs/add-modal-examples/03-components/form-controls/text-area.html
index bc953906f7..dbbb81b162 100644
--- a/docs/add-modal-examples/03-components/form-controls/text-area.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>TextArea</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" aria-describedby="react-aria-:R1j7rqjaH3: react-aria-:R1j7rqjaH4:" rows="5" class="flow--text-area" data-rac=""></textarea><label class="flow--label flow--form-field--label" id="react-aria-:R1j7rqjaH1:" for="react-aria-:R1j7rqja:">Public Key<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R1j7rqjaH3:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"TextArea\"}],\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" aria-describedby="react-aria-:R1j7rqjaH3: react-aria-:R1j7rqjaH4:" rows="5" class="flow--text-area" data-rac=""></textarea><label class="flow--label flow--form-field--label" id="react-aria-:R1j7rqjaH1:" for="react-aria-:R1j7rqja:">Public Key<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R1j7rqjaH3:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"TextArea\"}],\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextArea\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/text-area.txt b/docs/add-modal-examples/03-components/form-controls/text-area.txt
index 3ec0c07f5b..e258cf0229 100644
--- a/docs/add-modal-examples/03-components/form-controls/text-area.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/form-controls/text-field.html b/docs/add-modal-examples/03-components/form-controls/text-field.html
index 0e5c0a9592..e57ce3d619 100644
--- a/docs/add-modal-examples/03-components/form-controls/text-field.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>TextField</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" aria-describedby="react-aria-:R1j7rqjaH3: react-aria-:R1j7rqjaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R1j7rqjaH1:" for="react-aria-:R1j7rqja:">URL<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R1j7rqjaH3:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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,"175: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"TextField\"}],\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextField\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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\",[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Guidelines\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" aria-describedby="react-aria-:R1j7rqjaH3: react-aria-:R1j7rqjaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R1j7rqjaH1:" for="react-aria-:R1j7rqja:">URL<!-- --> (optional)</label><span class="flow--field-description flow--form-field--field-description" id="react-aria-:R1j7rqjaH3:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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,"175: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"TextField\"}],\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/TextField\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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\",[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Guidelines\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/form-controls/text-field.txt b/docs/add-modal-examples/03-components/form-controls/text-field.txt
index df017cb769..455cd23d8a 100644
--- a/docs/add-modal-examples/03-components/form-controls/text-field.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/navigation/breadcrumb.html b/docs/add-modal-examples/03-components/navigation/breadcrumb.html
index c9b2959f07..f0aeba4098 100644
--- a/docs/add-modal-examples/03-components/navigation/breadcrumb.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Breadcrumb</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" 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/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Breadcrumb\"}],\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Breadcrumb\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" 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/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Breadcrumb\"}],\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Breadcrumb\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/navigation/breadcrumb.txt b/docs/add-modal-examples/03-components/navigation/breadcrumb.txt
index 4500a4d83c..f45c6857ba 100644
--- a/docs/add-modal-examples/03-components/navigation/breadcrumb.txt
+++ b/docs/add-modal-examples/03-components/navigation/breadcrumb.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/breadcrumb","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/navigation/header-navigation.html b/docs/add-modal-examples/03-components/navigation/header-navigation.html
index e0daccc31f..aeafe89855 100644
--- a/docs/add-modal-examples/03-components/navigation/header-navigation.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>HeaderNavigation</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n175: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}\n176:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"HeaderNavigation\"}],\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/HeaderNavigation\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"contextMenu\":\"$176\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n175: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}\n176:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"HeaderNavigation\"}],\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/HeaderNavigation\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"contextMenu\":\"$176\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/navigation/header-navigation.txt b/docs/add-modal-examples/03-components/navigation/header-navigation.txt
index c88503c52d..d61bce70e1 100644
--- a/docs/add-modal-examples/03-components/navigation/header-navigation.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/navigation/link.html b/docs/add-modal-examples/03-components/navigation/link.html
index 909ec8b760..fd0f3702d6 100644
--- a/docs/add-modal-examples/03-components/navigation/link.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Link</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Link\"}],\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Link\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Link\"}],\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Link\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/navigation/link.txt b/docs/add-modal-examples/03-components/navigation/link.txt
index f66cab5cdb..51e3ad4b32 100644
--- a/docs/add-modal-examples/03-components/navigation/link.txt
+++ b/docs/add-modal-examples/03-components/navigation/link.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/link","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/navigation/navigation.html b/docs/add-modal-examples/03-components/navigation/navigation.html
index 666e07ddc1..9e0f8f5b68 100644
--- a/docs/add-modal-examples/03-components/navigation/navigation.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Navigation</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Navigation\"}],\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Navigation\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Navigation\"}],\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Navigation\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/navigation/navigation.txt b/docs/add-modal-examples/03-components/navigation/navigation.txt
index d410091518..152d2016c3 100644
--- a/docs/add-modal-examples/03-components/navigation/navigation.txt
+++ b/docs/add-modal-examples/03-components/navigation/navigation.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/navigation","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/navigation/tabs.html b/docs/add-modal-examples/03-components/navigation/tabs.html
index 446c37ae26..e89b671ae4 100644
--- a/docs/add-modal-examples/03-components/navigation/tabs.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Tabs</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1mhj7rqja:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\n175: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}\n176:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Tabs\"}],\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tabs\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"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\":\"$176\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1mhj7rqja:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\n175: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}\n176:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Tabs\"}],\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tabs\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"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\":\"$176\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/navigation/tabs.txt b/docs/add-modal-examples/03-components/navigation/tabs.txt
index a5b2c75beb..aed440f3c9 100644
--- a/docs/add-modal-examples/03-components/navigation/tabs.txt
+++ b/docs/add-modal-examples/03-components/navigation/tabs.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/navigation/tabs","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/overlays/modal.html b/docs/add-modal-examples/03-components/overlays/modal.html
index ba043b7cec..83ba82e282 100644
--- a/docs/add-modal-examples/03-components/overlays/modal.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Modal</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" 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/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqjaH1:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n176:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n177:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n178:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"172:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n173:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-component"])</script><script>self.__next_f.push([1,"s/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n174:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"175:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"179:T72d,\"use strict\";\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: \"Als OffCanvas\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"offCanvas\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Weitere Beispiele\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"App Installation\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"appInstallation\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Ticket\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"ticket\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Server buchen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"order\",\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}\n17a:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"17b:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n17c:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-component"])</script><script>self.__next_f.push([1,"s/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n17d:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"17e:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Modal\"}],\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Modal\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":{\"appInstallation\":\"$171\",\"default\":\"$172\",\"offCanvas\":\"$173\",\"order\":\"$174\",\"ticket\":\"$175\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L176\",null,{\"children\":[[\"$\",\"$L177\",null,{\"children\":[[\"$\",\"$L178\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$179\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"appInstallation\":\"$17a\",\"default\":\"$17b\",\"offCanvas\":\"$17c\",\"order\":\"$17d\",\"ticket\":\"$17e\"},\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" 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/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqjaH1:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n176:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n177:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n178:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"172:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n173:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-component"])</script><script>self.__next_f.push([1,"s/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n174:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"175:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"179:T72d,\"use strict\";\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: \"Als OffCanvas\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"offCanvas\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Weitere Beispiele\"\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"App Installation\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"appInstallation\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Ticket\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"ticket\",\n      editorCollapsed: true\n    }), \"\\n\", _jsx(_components.h3, {\n      children: \"Server buchen\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"order\",\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}\n17a:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"17b:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n17c:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-component"])</script><script>self.__next_f.push([1,"s/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n17d:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"17e:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Modal\"}],\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Modal\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":{\"appInstallation\":\"$171\",\"default\":\"$172\",\"offCanvas\":\"$173\",\"order\":\"$174\",\"ticket\":\"$175\"},\"slugs\":[\"03-components\",\"overlays\",\"modal\"],\"filename\":\"03-components/overlays/modal/index.mdx\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L176\",null,{\"children\":[[\"$\",\"$L177\",null,{\"children\":[[\"$\",\"$L178\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$179\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"appInstallation\":\"$17a\",\"default\":\"$17b\",\"offCanvas\":\"$17c\",\"order\":\"$17d\",\"ticket\":\"$17e\"},\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/overlays/modal.txt b/docs/add-modal-examples/03-components/overlays/modal.txt
index 0d24015c8f..eca97664a6 100644
--- a/docs/add-modal-examples/03-components/overlays/modal.txt
+++ b/docs/add-modal-examples/03-components/overlays/modal.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/overlays/modal","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -4385,7 +4381,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-16e:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+16e:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -4600,9 +4596,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -5208,7 +5202,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-177:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+177:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -5423,9 +5417,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/overlays/off-canvas.html b/docs/add-modal-examples/03-components/overlays/off-canvas.html
index a7aca83e97..d52e2496e5 100644
--- a/docs/add-modal-examples/03-components/overlays/off-canvas.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>OffCanvas</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqjaH1:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171: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;\n175: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}\n176: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"OffCanvas\"}],\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/OffCanvas\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$176\"},\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqjaH1:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171: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;\n175: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}\n176: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"OffCanvas\"}],\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/OffCanvas\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\"},\"slugs\":[\"03-components\",\"overlays\",\"off-canvas\"],\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$176\"},\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/overlays/off-canvas.txt b/docs/add-modal-examples/03-components/overlays/off-canvas.txt
index ed86576d50..2638a8a1cd 100644
--- a/docs/add-modal-examples/03-components/overlays/off-canvas.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/overlays/tooltip.html b/docs/add-modal-examples/03-components/overlays/tooltip.html
index 0158a852aa..bce119022e 100644
--- a/docs/add-modal-examples/03-components/overlays/tooltip.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Tooltip</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Tooltip\"}],\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tooltip\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Tooltip\"}],\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Tooltip\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/overlays/tooltip.txt b/docs/add-modal-examples/03-components/overlays/tooltip.txt
index 91d156bcb2..5c238cddee 100644
--- a/docs/add-modal-examples/03-components/overlays/tooltip.txt
+++ b/docs/add-modal-examples/03-components/overlays/tooltip.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/overlays/tooltip","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/status/counter-label.html b/docs/add-modal-examples/03-components/status/counter-label.html
index c2609dcab1..5c3f61e8d3 100644
--- a/docs/add-modal-examples/03-components/status/counter-label.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>CounterBadge</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" 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/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CounterBadge\"}],\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CounterBadge\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" 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/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"CounterBadge\"}],\"Das CounterBadge wird verwendet, um Veränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/CounterBadge\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/status/counter-label.txt b/docs/add-modal-examples/03-components/status/counter-label.txt
index 62209b0479..ef1a93a901 100644
--- a/docs/add-modal-examples/03-components/status/counter-label.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/status/inline-alert.html b/docs/add-modal-examples/03-components/status/inline-alert.html
index a704d0a607..c287f053b9 100644
--- a/docs/add-modal-examples/03-components/status/inline-alert.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>InlineAlert</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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;\n175: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}\n176:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"InlineAlert\"}],\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineAlert\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"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\":\"$176\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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;\n175: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}\n176:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"InlineAlert\"}],\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/InlineAlert\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"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\":\"$176\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/status/inline-alert.txt b/docs/add-modal-examples/03-components/status/inline-alert.txt
index 4a80ebffa1..7e2434cd65 100644
--- a/docs/add-modal-examples/03-components/status/inline-alert.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/status/loading-spinner.html b/docs/add-modal-examples/03-components/status/loading-spinner.html
index 4b80533193..0adfcd4bd1 100644
--- a/docs/add-modal-examples/03-components/status/loading-spinner.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>LoadingSpinner</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LoadingSpinner\"}],\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LoadingSpinner\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LoadingSpinner\"}],\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LoadingSpinner\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/status/loading-spinner.txt b/docs/add-modal-examples/03-components/status/loading-spinner.txt
index 7ba4de5e3e..56e0157c1c 100644
--- a/docs/add-modal-examples/03-components/status/loading-spinner.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/status/progress-bar.html b/docs/add-modal-examples/03-components/status/progress-bar.html
index 3a94c2a3b1..e45e50e6b4 100644
--- a/docs/add-modal-examples/03-components/status/progress-bar.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>ProgressBar</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" 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-:R1j7rqjaH1:">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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ProgressBar\"}],\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ProgressBar\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" aria-labelledby="react-aria-:R1j7rqjaH1:" 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-:R1j7rqjaH1:">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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ProgressBar\"}],\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ProgressBar\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/status/progress-bar.txt b/docs/add-modal-examples/03-components/status/progress-bar.txt
index e95c37ae35..d7fbb4dc88 100644
--- a/docs/add-modal-examples/03-components/status/progress-bar.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/status/status-badge.html b/docs/add-modal-examples/03-components/status/status-badge.html
index 488368d755..153899dfbb 100644
--- a/docs/add-modal-examples/03-components/status/status-badge.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>StatusBadge</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"StatusBadge\"}],\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusBadge\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"StatusBadge\"}],\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusBadge\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/status/status-badge.txt b/docs/add-modal-examples/03-components/status/status-badge.txt
index 7a80e9b76f..d6da37f67d 100644
--- a/docs/add-modal-examples/03-components/status/status-badge.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/status/status-icon.html b/docs/add-modal-examples/03-components/status/status-icon.html
index 015bc63274..00c09f26dd 100644
--- a/docs/add-modal-examples/03-components/status/status-icon.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>StatusIcon</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"StatusIcon\"}],\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusIcon\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"StatusIcon\"}],\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/StatusIcon\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/status/status-icon.txt b/docs/add-modal-examples/03-components/status/status-icon.txt
index ceebe0ccc1..804371a9f1 100644
--- a/docs/add-modal-examples/03-components/status/status-icon.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/structure/accordion.html b/docs/add-modal-examples/03-components/structure/accordion.html
index 38553a90e4..1cc308a4cb 100644
--- a/docs/add-modal-examples/03-components/structure/accordion.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Accordion</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" 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/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R1j7rqjaH1:" 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=":R1j7rqja:" id=":R1j7rqjaH1:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Accordion\"}],\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Accordion\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" 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/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R1j7rqjaH1:" 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=":R1j7rqja:" id=":R1j7rqjaH1:" 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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Accordion\"}],\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Accordion\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/structure/accordion.txt b/docs/add-modal-examples/03-components/structure/accordion.txt
index 27539280ff..6470857213 100644
--- a/docs/add-modal-examples/03-components/structure/accordion.txt
+++ b/docs/add-modal-examples/03-components/structure/accordion.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/accordion","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/structure/column-layout.html b/docs/add-modal-examples/03-components/structure/column-layout.html
index 4c676ece5c..c6f79eb890 100644
--- a/docs/add-modal-examples/03-components/structure/column-layout.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>ColumnLayout</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R9j7rqja:" aria-labelledby="react-aria-:R9j7rqjaH1:" aria-describedby="react-aria-:R9j7rqjaH3: react-aria-:R9j7rqjaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R9j7rqjaH1:" for="react-aria-:R9j7rqja:">Vorname<!-- --> (optional)</label></div><div class="flow--form-field" data-rac=""><input type="text" id="react-aria-:Rhj7rqja:" aria-labelledby="react-aria-:Rhj7rqjaH1:" aria-describedby="react-aria-:Rhj7rqjaH3: react-aria-:Rhj7rqjaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:Rhj7rqjaH1:" for="react-aria-:Rhj7rqja:">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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ColumnLayout\"}],\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ColumnLayout\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R9j7rqja:" aria-labelledby="react-aria-:R9j7rqjaH1:" aria-describedby="react-aria-:R9j7rqjaH3: react-aria-:R9j7rqjaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:R9j7rqjaH1:" for="react-aria-:R9j7rqja:">Vorname<!-- --> (optional)</label></div><div class="flow--form-field" data-rac=""><input type="text" id="react-aria-:Rhj7rqja:" aria-labelledby="react-aria-:Rhj7rqjaH1:" aria-describedby="react-aria-:Rhj7rqjaH3: react-aria-:Rhj7rqjaH4:" class="flow--text-field" data-rac="" value=""/><label class="flow--label flow--form-field--label" id="react-aria-:Rhj7rqjaH1:" for="react-aria-:Rhj7rqja:">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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"ColumnLayout\"}],\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/ColumnLayout\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/structure/column-layout.txt b/docs/add-modal-examples/03-components/structure/column-layout.txt
index 55af90965f..5787c6ddf7 100644
--- a/docs/add-modal-examples/03-components/structure/column-layout.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/structure/layout-card.html b/docs/add-modal-examples/03-components/structure/layout-card.html
index 3c5152b418..7bebc5338c 100644
--- a/docs/add-modal-examples/03-components/structure/layout-card.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>LayoutCard</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LayoutCard\"}],\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LayoutCard\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"LayoutCard\"}],\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/LayoutCard\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/structure/layout-card.txt b/docs/add-modal-examples/03-components/structure/layout-card.txt
index e6edfa658a..fa3a189a63 100644
--- a/docs/add-modal-examples/03-components/structure/layout-card.txt
+++ b/docs/add-modal-examples/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:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/structure/list.html b/docs/add-modal-examples/03-components/structure/list.html
index f2ea1dbb9c..c7a5f97098 100644
--- a/docs/add-modal-examples/03-components/structure/list.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>List</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-container"><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--items--item-container"><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--items--item-container"><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--items--item-container"><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--items--item-container"><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><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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n175:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n176:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171: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;\n172: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;\n173: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;\n177: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}\n178: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;\n179: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;\n17a: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"List\"}],\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/List\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"main\":\"$172\",\"withLink\":\"$173\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L174\",null,{\"children\":[[\"$\",\"$L175\",null,{\"children\":[[\"$\",\"$L176\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$177\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$178\",\"main\":\"$179\",\"withLink\":\"$17a\"},\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-container"><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--items--item-container"><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--items--item-container"><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--items--item-container"><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--items--item-container"><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><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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n175:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n176:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171: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;\n172: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;\n173: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;\n177: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}\n178: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;\n179: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;\n17a: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"List\"}],\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/List\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"main\":\"$172\",\"withLink\":\"$173\"},\"slugs\":[\"03-components\",\"structure\",\"list\"],\"filename\":\"03-components/structure/list/index.mdx\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L174\",null,{\"children\":[[\"$\",\"$L175\",null,{\"children\":[[\"$\",\"$L176\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$177\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$178\",\"main\":\"$179\",\"withLink\":\"$17a\"},\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/structure/list.txt b/docs/add-modal-examples/03-components/structure/list.txt
index 7d50f66046..73a9cfa7f9 100644
--- a/docs/add-modal-examples/03-components/structure/list.txt
+++ b/docs/add-modal-examples/03-components/structure/list.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/list","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/structure/section.html b/docs/add-modal-examples/03-components/structure/section.html
index 5f521f6e00..78493aa1c5 100644
--- a/docs/add-modal-examples/03-components/structure/section.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Section</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n175: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}\n176:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und 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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Section\"}],\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Section\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"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\":\"$176\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n175: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}\n176:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und 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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Section\"}],\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Section\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"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\":\"$176\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/structure/section.txt b/docs/add-modal-examples/03-components/structure/section.txt
index feed05ae78..f3871073a3 100644
--- a/docs/add-modal-examples/03-components/structure/section.txt
+++ b/docs/add-modal-examples/03-components/structure/section.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/section","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/structure/separator.html b/docs/add-modal-examples/03-components/structure/separator.html
index 6472916d38..b9e263f8f5 100644
--- a/docs/add-modal-examples/03-components/structure/separator.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Separator</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Separator\"}],\"A Separator is a horizontal line that separates content.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Separator\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n171:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"174: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Separator\"}],\"A Separator is a horizontal line that separates content.\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Separator\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L171\",null,{\"children\":[[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$174\",\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/structure/separator.txt b/docs/add-modal-examples/03-components/structure/separator.txt
index f6c19716b1..bc7f292a18 100644
--- a/docs/add-modal-examples/03-components/structure/separator.txt
+++ b/docs/add-modal-examples/03-components/structure/separator.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/separator","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/03-components/structure/table.html b/docs/add-modal-examples/03-components/structure/table.html
index 695b12886b..2518fb2438 100644
--- a/docs/add-modal-examples/03-components/structure/table.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8fe1df7c763621d8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>Table</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" 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-:R1j7rqja:-react-aria-2" class="flow--table--column" data-rac="">Name</th><th tabindex="-1" data-key="react-aria-3" role="columnheader" id="react-aria-:R1j7rqja:-react-aria-3" class="flow--table--column" data-rac="">Type</th><th tabindex="-1" data-key="react-aria-4" role="columnheader" id="react-aria-:R1j7rqja:-react-aria-4" class="flow--table--column" data-rac="">Default</th><th tabindex="-1" data-key="react-aria-5" role="columnheader" id="react-aria-:R1j7rqja:-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-:R1j7rqja:-react-aria-7-react-aria-2 react-aria-:R1j7rqja:-react-aria-7-react-aria-3 react-aria-:R1j7rqja:-react-aria-7-react-aria-4 react-aria-:R1j7rqja:-react-aria-7-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-8" role="rowheader" id="react-aria-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-react-aria-12-react-aria-2 react-aria-:R1j7rqja:-react-aria-12-react-aria-3 react-aria-:R1j7rqja:-react-aria-12-react-aria-4 react-aria-:R1j7rqja:-react-aria-12-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-13" role="rowheader" id="react-aria-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-react-aria-17-react-aria-2 react-aria-:R1j7rqja:-react-aria-17-react-aria-3 react-aria-:R1j7rqja:-react-aria-17-react-aria-4 react-aria-:R1j7rqja:-react-aria-17-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-18" role="rowheader" id="react-aria-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171: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;\n175: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}\n176: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Table\"}],\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Table\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$176\"},\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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=":R1ja:" class="flow--heading flow--heading--h2">Components</h2><nav class="flow--navigation" role="navigation" aria-labelledby=":R1ja:"><ul><div class="flow--accordion flow--accordion--expanded flow--navigation--navigation-group"><label class="flow--label flow--accordion--header" id=":R1lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":R9ljaH1:" 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=":R9lja:" id=":R9ljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action-group">ActionGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/action">Action</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/button">Button</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/actions/context-menu">ContextMenu</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R2lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RaljaH1:" 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=":Ralja:" id=":RaljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/avatar">Avatar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/heading">Heading</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/icon">Icon</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/illustrated-message">IllustratedMessage</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/image">Image</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/inline-code">InlineCode</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/label">Label</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/labeled-value">LabeledValue</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/content/skeleton">Skeleton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R3lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RbljaH1:" 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=":Rblja:" id=":RbljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-button">CheckboxButton</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox-group">CheckboxGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/checkbox">Checkbox</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/number-field">NumberField</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/radio-group">RadioGroup</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/select">Select</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/slider">Slider</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/switch">Switch</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/form-controls/text-area">TextArea</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R4lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RcljaH1:" 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=":Rclja:" id=":RcljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/breadcrumb">Breadcrumb</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/header-navigation">HeaderNavigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/link">Link</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/navigation/navigation">Navigation</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R5lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RdljaH1:" 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=":Rdlja:" id=":RdljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/modal">Modal</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/overlays/off-canvas">OffCanvas</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R6lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":ReljaH1:" 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=":Relja:" id=":ReljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/counter-label">CounterBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/inline-alert">InlineAlert</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/loading-spinner">LoadingSpinner</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/progress-bar">ProgressBar</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/status/status-badge">StatusBadge</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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=":R7lja:" aria-hidden="true"><button type="button" aria-expanded="true" aria-controls=":RfljaH1:" 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=":Rflja:" id=":RfljaH1:" role="region" class="flow--accordion--content"><div class="flow--accordion--content-inner"><ul><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/accordion">Accordion</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/column-layout">ColumnLayout</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/layout-card">LayoutCard</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/list">List</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/section">Section</a></li><li><a class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/03-components/structure/separator">Separator</a></li><li><a aria-current="page" class="flow--navigation--item" href="/flow-previews/docs/add-modal-examples/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-:R1j7rqja:" 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-:R1j7rqja:-react-aria-2" class="flow--table--column" data-rac="">Name</th><th tabindex="-1" data-key="react-aria-3" role="columnheader" id="react-aria-:R1j7rqja:-react-aria-3" class="flow--table--column" data-rac="">Type</th><th tabindex="-1" data-key="react-aria-4" role="columnheader" id="react-aria-:R1j7rqja:-react-aria-4" class="flow--table--column" data-rac="">Default</th><th tabindex="-1" data-key="react-aria-5" role="columnheader" id="react-aria-:R1j7rqja:-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-:R1j7rqja:-react-aria-7-react-aria-2 react-aria-:R1j7rqja:-react-aria-7-react-aria-3 react-aria-:R1j7rqja:-react-aria-7-react-aria-4 react-aria-:R1j7rqja:-react-aria-7-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-8" role="rowheader" id="react-aria-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-react-aria-12-react-aria-2 react-aria-:R1j7rqja:-react-aria-12-react-aria-3 react-aria-:R1j7rqja:-react-aria-12-react-aria-4 react-aria-:R1j7rqja:-react-aria-12-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-13" role="rowheader" id="react-aria-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-react-aria-17-react-aria-2 react-aria-:R1j7rqja:-react-aria-17-react-aria-3 react-aria-:R1j7rqja:-react-aria-17-react-aria-4 react-aria-:R1j7rqja:-react-aria-17-react-aria-5" class="" data-rac=""><td tabindex="-1" data-key="react-aria-18" role="rowheader" id="react-aria-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1j7rqja:-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-:R1ml7rqja:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"style\"]\n3:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L4\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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/add-modal-examples/_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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nf:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\n10:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n11:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n12:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n27:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n28:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n2a:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfca"])</script><script>self.__next_f.push([1,"c4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n2b:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n2c:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2d:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2e:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n138:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n16b:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n16c:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"9"])</script><script>self.__next_f.push([1,"75\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"LayoutCard\"]\n16d:I[37393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"ColumnLayout\"]\n16e:I[48357,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Link\"]\n16f:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconExternalLink\"]\n170:I[49067,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n172:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tabs\"]\n173:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static"])</script><script>self.__next_f.push([1,"/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Tab\"]\n174:I[31393,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"TabTitle\"]\n13:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"16: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;\n17:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"18:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"19:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n1a:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n1b:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n1d:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1f:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"20: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;\n21:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n22: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;\n23:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n24: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n25:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n26: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 "])</script><script>self.__next_f.push([1,"   \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;\n30:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"31:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n32:{}\n2f:{\"compiledSource\":\"$30\",\"frontmatter\":\"$31\",\"scope\":\"$32\"}\n33:{}\n34:[\"01-get-started\",\"installation\"]\n36:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"37:{}\n38:{}\n35:{\"compiledSource\":\"$36\",\"frontmatter\":\"$37\",\"scope\":\"$38\"}\n39:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n3a:[\"01-get-started\",\"stylesheet\"]\n3c:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3d:{}\n3e:{}\n3b:{\"compiledSource\":\"$3c\",\"frontmatter\":\"$3d\",\"scope\":\"$3e\"}\n3f:{}\n40:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n42:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n44:{\"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\"}\n45:[\"03-components\",\"actions\",\"action-group\"]\n47:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n48:{}\n46:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$47\",\"scope\":\"$48\"}\n4a: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;\n49:{\"confirmation\":\"$4a\",\"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\"}\n4b:[\"03-components\",\"actions\",\"action\"]\n4d:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4e:{}\n4c:{\"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\":\"$4d\",\"scope\":\"$4e\"}\n"])</script><script>self.__next_f.push([1,"4f:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"50:[\"03-components\",\"actions\",\"button\"]\n52:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"54:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"55:[\"03-components\",\"actions\",\"context-menu\"]\n57:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\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: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n5a:[\"03-components\",\"actions\",\"copy-button\"]\n5c:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\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:"])</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\":\"$5c\",\"scope\":\"$5d\"}\n5e:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5f:[\"03-components\",\"content\",\"avatar\"]\n61:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\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\"}\n63:{\"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\"}\n64:[\"03-components\",\"content\",\"heading\"]\n66:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n67:{}\n65:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$66\",\"scope\":\"$67\"}\n69:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"6a:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"68:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$69\",\"functional\":\"$6a\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"6b:[\"03-components\",\"content\",\"icon\"]\n6d:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\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    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n70:[\"03-components\",\"content\",\"illustrated-message\"]\n72:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n73:{}\n71:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n75:[\"03-components\",\"content\",\"image\"]\n77:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n78:{}\n76:{\"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\":\"$77\",\"scope\":\"$78\"}\n79:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n7a:[\"03-components\",\"content\",\"inline-code\"]\n7c:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\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 _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\":\"$7c\",\"scope\":\"$7d\"}\n7e:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7f:[\"03-components\",\"content\",\"label\"]\n81:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\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.\\\");\\n}\\n\",\"frontmatter\":\"$81\",\"scope\":\"$82\"}\n83:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n84:[\"03-components\",\"content\",\"labeled-value\"]\n86:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\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"])</script><script>self.__next_f.push([1,".\\\");\\n}\\n\",\"frontmatter\":\"$86\",\"scope\":\"$87\"}\n88:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n89:[\"03-components\",\"content\",\"skeleton\"]\n8b:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\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 Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8e:[\"03-components\",\"content\",\"text\"]\n90:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\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  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n93:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n95:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n96:{}\n94:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$95\",\"scope\":\"$96\"}\n97:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n98:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n9a:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n9b:{}\n99:{\"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\":\"$9a\",\"scope\":\"$9b\"}\n9c:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9d:[\"03-components\",\"form-controls\",\"checkbox\"]\n9f:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\na1:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\na2:[\"03-components\",\"form-controls\",\"number-field\"]\na4:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na5:{}\na3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a4\",\"scope\":\"$a5\"}\n"])</script><script>self.__next_f.push([1,"a6:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a7:[\"03-components\",\"form-controls\",\"radio-group\"]\na9:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\nac:[\"03-components\",\"form-controls\",\"select\"]\nae:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ae\",\"scope\":\"$af\"}\nb0:{\"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\"}\nb1:[\"03-components\",\"form-controls\",\"slider\"]\nb3:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b3\",\"scope\":\"$b4\"}\nb5:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb6:[\"03-components\",\"form-controls\",\"switch\"]\nb8:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nbb:[\"03-components\",\"form-controls\",\"text-area\"]\nbd:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$bd\",\"scope\":\"$be\"}\n"])</script><script>self.__next_f.push([1,"bf:{\"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,"c0:[\"03-components\",\"form-controls\",\"text-field\"]\nc2:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc5:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc7:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$c7\",\"scope\":\"$c8\"}\nca:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc9:{\"contextMenu\":\"$ca\",\"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\"}\ncb:[\"03-components\",\"navigation\",\"header-navigation\"]\ncd:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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\"}\ncf:{\"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\"}\nd0:[\"03-components\",\"navigation\",\"link\"]\nd2:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd3:{}\nd1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$d2\",\"scope\":\"$d3\"}\n"])</script><script>self.__next_f.push([1,"d4:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d5:[\"03-components\",\"navigation\",\"navigation\"]\nd7:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nda:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd9:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$da\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\ndb:[\"03-components\",\"navigation\",\"tabs\"]\ndd:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne2:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne3:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e4:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"df:{\"appInstallation\":\"$e0\",\"default\":\"$e1\",\"offCanvas\":\"$e2\",\"order\":\"$e3\",\"ticket\":\"$e4\"}\ne5:[\"03-components\",\"overlays\",\"modal\"]\ne7:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\nea: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne9:{\"default\":\"$ea\"}\neb:[\"03-components\",\"overlays\",\"off-canvas\"]\ned:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\nee:{}\nec:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ed\",\"scope\":\"$ee\"}\nef:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nf0:[\"03-components\",\"overlays\",\"tooltip\"]\nf2:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nf3:{}\nf1:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f2\",\"scope\":\"$f3\"}\nf4:{\"default\":\"import 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\"}\nf5:[\"03-components\",\"status\",\"counter-label\"]\nf7:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf8:{}\nf6:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f7\",\"scope\":\"$f8\"}\nfa:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf9:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$fa\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nfb:[\"03-components\",\"status\",\"inline-alert\"]\nfd:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\nfe:{}\nfc:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + "])</script><script>self.__next_f.push([1,"(component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$fd\",\"scope\":\"$fe\"}\nff:{\"default\":\"import LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\n100:[\"03-components\",\"status\",\"loading-spinner\"]\n102:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n103:{}\n101:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$102\",\"scope\":\"$103\"}\n104:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@"])</script><script>self.__next_f.push([1,"mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n105:[\"03-components\",\"status\",\"progress-bar\"]\n107:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n108:{}\n106:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$107\",\"scope\":\"$108\"}\n109:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBa"])</script><script>self.__next_f.push([1,"dge status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n10a:[\"03-components\",\"status\",\"status-badge\"]\n10c:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n10d:{}\n10b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10c\",\"scope\":\"$10d\"}\n10e:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10f:[\"03-components\",\"status\",\"status-icon\"]\n111:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n112:{}\n110:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents}"])</script><script>self.__next_f.push([1," = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$111\",\"scope\":\"$112\"}\n113:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n114:[\"03-components\",\"structure\",\"accordion\"]\n116:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n117:{}\n115:{\"compiledS"])</script><script>self.__next_f.push([1,"ource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$116\",\"scope\":\"$117\"}\n118:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimp"])</script><script>self.__next_f.push([1,"ort Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n119:[\"03-components\",\"structure\",\"column-layout\"]\n11b:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n11c:{}\n11a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$11b\",\"scope\":\"$11c\"}\n11d:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11e:[\"03-components\",\"structure\",\"layout-card\"]\n120:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n121:{}\n11f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"Live"])</script><script>self.__next_f.push([1,"CodeEditor\\\", 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\":\"$120\",\"scope\":\"$121\"}\n123: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.t"])</script><script>self.__next_f.push([1,"ype}\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n124: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;\n125: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\""])</script><script>self.__next_f.push([1,";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n122:{\"default\":\"$123\",\"main\":\"$124\",\"withLink\":\"$125\"}\n126:[\"03-components\",\"structure\",\"list\"]\n128:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, compone"])</script><script>self.__next_f.push([1,"nt) {\\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\"}\n12b:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n12a:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$12b\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimpor"])</script><script>self.__next_f.push([1,"t Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n12c:[\"03-components\",\"structure\",\"section\"]\n12e:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\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"])</script><script>self.__next_f.push([1,"(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n131:[\"03-components\",\"structure\",\"separator\"]\n133:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n134:{}\n132:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$133\",\"scope\":\"$134\"}\n136: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  \u003cTa"])</script><script>self.__next_f.push([1,"bleBody\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;\n135:{\"default\":\"$136\"}\n137:[\"03-components\",\"structure\",\"table\"]\n13a:{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"}\n13b:{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n13c:{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13d:{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13e:{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13f:{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"}\n140:{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n141:{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n142:{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n143:{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"}\n144:{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/ico"])</script><script>self.__next_f.push([1,"n/index.mdx\"}\n145:{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n146:{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"}\n147:{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n148:{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"}\n149:{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n14a:{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n14b:{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"}\n14c:{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14d:{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14e:{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14f:{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n150:{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n151:{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n152:{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n153:{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n154:{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n155:{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n156:{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/brea"])</script><script>self.__next_f.push([1,"dcrumb/index.mdx\"}\n157:{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n158:{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n159:{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n15a:{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n15b:{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n15c:{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15d:{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15e:{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15f:{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n160:{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n161:{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n162:{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n163:{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n164:{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n165:{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n166:{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n167:{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"}\n168:{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/ind"])</script><script>self.__next_f.push([1,"ex.mdx\"}\n169:{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n16a:{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}\n139:[\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lf\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$L10\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$L11\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$L12\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$13\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$14\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$15\",\"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\":\"$16\",\"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\":\"$17\",\"functional\":\"$18\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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\":\"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\":\"$19\",\"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\":\"$1a\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$1b\",\"default\":\"$1c\",\"offCanvas\":\"$1d\",\"order\":\"$1e\",\"ticket\":\"$1f\"},\"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\":\"$20\"},\"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\":\"$21\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$22\",\"main\":\"$23\",\"withLink\":\"$24\"},\"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\":\"$25\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$26\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L27\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L28\",null,{\"children\":[\"$\",\"$L29\",null,{\"children\":[[\"$\",\"$L2a\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L2b\",null,{}]}],[\"$\",\"$L2c\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2d\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L12\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L138\",null,{\"docs\":\"$139\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L16b\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L138\",null,{\"docs\":[{\"mdxSource\":\"$2f\",\"examples\":\"$33\",\"slugs\":\"$34\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$35\",\"examples\":\"$39\",\"slugs\":\"$3a\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$3b\",\"examples\":\"$3f\",\"slugs\":\"$40\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$41\",\"examples\":\"$44\",\"slugs\":\"$45\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$46\",\"examples\":\"$49\",\"slugs\":\"$4b\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$4c\",\"examples\":\"$4f\",\"slugs\":\"$50\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$51\",\"examples\":\"$54\",\"slugs\":\"$55\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$56\",\"examples\":\"$59\",\"slugs\":\"$5a\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$5b\",\"examples\":\"$5e\",\"slugs\":\"$5f\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$60\",\"examples\":\"$63\",\"slugs\":\"$64\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$65\",\"examples\":\"$68\",\"slugs\":\"$6b\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$6c\",\"examples\":\"$6f\",\"slugs\":\"$70\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$71\",\"examples\":\"$74\",\"slugs\":\"$75\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$76\",\"examples\":\"$79\",\"slugs\":\"$7a\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$7b\",\"examples\":\"$7e\",\"slugs\":\"$7f\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$80\",\"examples\":\"$83\",\"slugs\":\"$84\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$85\",\"examples\":\"$88\",\"slugs\":\"$89\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$8a\",\"examples\":\"$8d\",\"slugs\":\"$8e\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8f\",\"examples\":\"$92\",\"slugs\":\"$93\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$94\",\"examples\":\"$97\",\"slugs\":\"$98\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$99\",\"examples\":\"$9c\",\"slugs\":\"$9d\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9e\",\"examples\":\"$a1\",\"slugs\":\"$a2\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a3\",\"examples\":\"$a6\",\"slugs\":\"$a7\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a8\",\"examples\":\"$ab\",\"slugs\":\"$ac\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$ad\",\"examples\":\"$b0\",\"slugs\":\"$b1\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$b2\",\"examples\":\"$b5\",\"slugs\":\"$b6\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b7\",\"examples\":\"$ba\",\"slugs\":\"$bb\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$bc\",\"examples\":\"$bf\",\"slugs\":\"$c0\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$c1\",\"examples\":\"$c4\",\"slugs\":\"$c5\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c6\",\"examples\":\"$c9\",\"slugs\":\"$cb\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$cc\",\"examples\":\"$cf\",\"slugs\":\"$d0\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$d1\",\"examples\":\"$d4\",\"slugs\":\"$d5\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d6\",\"examples\":\"$d9\",\"slugs\":\"$db\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$dc\",\"examples\":\"$df\",\"slugs\":\"$e5\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e6\",\"examples\":\"$e9\",\"slugs\":\"$eb\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$ec\",\"examples\":\"$ef\",\"slugs\":\"$f0\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$f1\",\"examples\":\"$f4\",\"slugs\":\"$f5\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f6\",\"examples\":\"$f9\",\"slugs\":\"$fb\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$fc\",\"examples\":\"$ff\",\"slugs\":\"$100\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$101\",\"examples\":\"$104\",\"slugs\":\"$105\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$106\",\"examples\":\"$109\",\"slugs\":\"$10a\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$10b\",\"examples\":\"$10e\",\"slugs\":\"$10f\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$110\",\"examples\":\"$113\",\"slugs\":\"$114\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$115\",\"examples\":\"$118\",\"slugs\":\"$119\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$11a\",\"examples\":\"$11d\",\"slugs\":\"$11e\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11f\",\"examples\":\"$122\",\"slugs\":\"$126\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$127\",\"examples\":\"$12a\",\"slugs\":\"$12c\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12d\",\"examples\":\"$130\",\"slugs\":\"$131\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$132\",\"examples\":\"$135\",\"slugs\":\"$137\",\"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,"171: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;\n175: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}\n176: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:[[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L16d\",null,{\"m\":[1,1],\"children\":[[\"$\",\"$L2e\",null,{\"children\":[[\"$\",\"$L10\",null,{\"level\":1,\"children\":\"Table\"}],\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\",[\"$\",\"$L16e\",null,{\"href\":\"https://github.com/mittwald/flow/tree/main/packages/components/src/components/Table\",\"children\":[\"GitHub\",[\"$\",\"$L16f\",null,{}]]}]]}],[\"$\",\"$L170\",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\":\"$171\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}}]]}]}],[\"$\",\"$L16c\",null,{\"children\":[\"$\",\"$L172\",null,{\"children\":[[\"$\",\"$L173\",null,{\"children\":[[\"$\",\"$L174\",null,{\"children\":\"Overview\"}],[\"$\",\"$L2e\",null,{\"children\":[\"$\",\"$L170\",null,{\"mdxFile\":{\"mdxSource\":{\"compiledSource\":\"$175\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"default\":\"$176\"},\"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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/03-components/structure/table.txt b/docs/add-modal-examples/03-components/structure/table.txt
index cc6b09618f..fb17a58e79 100644
--- a/docs/add-modal-examples/03-components/structure/table.txt
+++ b/docs/add-modal-examples/03-components/structure/table.txt
@@ -1,7 +1,7 @@
 3:I[68648,[],""]
 5:I[91385,[],""]
 4:["slug","03-components/structure/table","c"]
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"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/add-modal-examples/_next/static/css/8fe1df7c763621d8.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$L6",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L7"]]]]
 8:I[18012,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 9:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
 a:I[989,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"default"]
@@ -1109,7 +1109,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-18:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+18:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1324,9 +1324,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3176,7 +3174,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-dd:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+dd:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3391,9 +3389,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
diff --git a/docs/add-modal-examples/404.html b/docs/add-modal-examples/404.html
index 708900778b..3be71f1cf4 100644
--- a/docs/add-modal-examples/404.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/css/cfb88d9daade875e.css" data-precedence="next"/><link rel="stylesheet" href="/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/ce067a8a-5bfcac4fb1be62e9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/975-42db6d55523e5280.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/460-420dcc5c1c246801.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/layout-ac87403527dc6914.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/d709487a-8b04f0f7982383f9.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/592-a900d46e309f5add.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js" async=""></script><title>404: This page could not be found.</title><title>Flow – mittwald Design System</title><script src="/flow-previews/docs/add-modal-examples/_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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nc:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\nd:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\ne:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\nf:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n24:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n25:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n27:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4f"])</script><script>self.__next_f.push([1,"b1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n28:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2a:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2b:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n135:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n168:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n10:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n17:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n18:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"19:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"1d: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;\n1e:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n1f: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;\n20:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n21: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n22:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n23: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 "])</script><script>self.__next_f.push([1,"   \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;\n2d:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2e:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2f:{}\n2c:{\"compiledSource\":\"$2d\",\"frontmatter\":\"$2e\",\"scope\":\"$2f\"}\n30:{}\n31:[\"01-get-started\",\"installation\"]\n33:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"34:{}\n35:{}\n32:{\"compiledSource\":\"$33\",\"frontmatter\":\"$34\",\"scope\":\"$35\"}\n36:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n37:[\"01-get-started\",\"stylesheet\"]\n39:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3a:{}\n3b:{}\n38:{\"compiledSource\":\"$39\",\"frontmatter\":\"$3a\",\"scope\":\"$3b\"}\n3c:{}\n3d:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n3f:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n40:{}\n3e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3f\",\"scope\":\"$40\"}\n41:{\"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\"}\n42:[\"03-components\",\"actions\",\"action-group\"]\n44:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n45:{}\n43:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$44\",\"scope\":\"$45\"}\n47: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;\n46:{\"confirmation\":\"$47\",\"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\"}\n48:[\"03-components\",\"actions\",\"action\"]\n4a:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4b:{}\n49:{\"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\":\"$4a\",\"scope\":\"$4b\"}\n"])</script><script>self.__next_f.push([1,"4c:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"4d:[\"03-components\",\"actions\",\"button\"]\n4f:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n50:{}\n4e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n"])</script><script>self.__next_f.push([1,"51:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"52:[\"03-components\",\"actions\",\"context-menu\"]\n54:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n55:{}\n53:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n57:[\"03-components\",\"actions\",\"copy-button\"]\n59:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5a:{}\n58:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\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\":\"$59\",\"scope\":\"$5a\"}\n5b:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5c:[\"03-components\",\"content\",\"avatar\"]\n5e:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n5f:{}\n5d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5e\",\"scope\":\"$5f\"}\n60:{\"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\"}\n61:[\"03-components\",\"content\",\"heading\"]\n63:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n64:{}\n62:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$63\",\"scope\":\"$64\"}\n66:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"67:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"65:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$66\",\"functional\":\"$67\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"68:[\"03-components\",\"content\",\"icon\"]\n6a:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6b:{}\n69:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n6d:[\"03-components\",\"content\",\"illustrated-message\"]\n6f:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n70:{}\n6e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n72:[\"03-components\",\"content\",\"image\"]\n74:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n75:{}\n73:{\"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\":\"$74\",\"scope\":\"$75\"}\n76:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n77:[\"03-components\",\"content\",\"inline-code\"]\n79:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7a:{}\n78:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7c:[\"03-components\",\"content\",\"label\"]\n7e:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n7f:{}\n7d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n81:[\"03-components\",\"content\",\"labeled-value\"]\n83:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n84:{}\n82:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _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\":\"$83\",\"scope\":\"$84\"}\n85:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n86:[\"03-components\",\"content\",\"skeleton\"]\n88:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n89:{}\n87:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8b:[\"03-components\",\"content\",\"text\"]\n8d:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n8e:{}\n8c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n90:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n92:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n93:{}\n91:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$92\",\"scope\":\"$93\"}\n94:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n95:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n97:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n98:{}\n96:{\"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\":\"$97\",\"scope\":\"$98\"}\n99:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9a:[\"03-components\",\"form-controls\",\"checkbox\"]\n9c:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n9d:{}\n9b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\n9f:[\"03-components\",\"form-controls\",\"number-field\"]\na1:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na2:{}\na0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\n"])</script><script>self.__next_f.push([1,"a3:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a4:[\"03-components\",\"form-controls\",\"radio-group\"]\na6:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\na9:[\"03-components\",\"form-controls\",\"select\"]\nab:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"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\"}\nae:[\"03-components\",\"form-controls\",\"slider\"]\nb0:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb3:[\"03-components\",\"form-controls\",\"switch\"]\nb5:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nb8:[\"03-components\",\"form-controls\",\"text-area\"]\nba:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$ba\",\"scope\":\"$bb\"}\n"])</script><script>self.__next_f.push([1,"bc:{\"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,"bd:[\"03-components\",\"form-controls\",\"text-field\"]\nbf:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc2:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc4:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc7:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc6:{\"contextMenu\":\"$c7\",\"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\"}\nc8:[\"03-components\",\"navigation\",\"header-navigation\"]\nca:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\ncb:{}\nc9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ca\",\"scope\":\"$cb\"}\ncc:{\"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\"}\ncd:[\"03-components\",\"navigation\",\"link\"]\ncf:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd0:{}\nce:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cf\",\"scope\":\"$d0\"}\n"])</script><script>self.__next_f.push([1,"d1:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d2:[\"03-components\",\"navigation\",\"navigation\"]\nd4:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nd7:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd6:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$d7\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\nd8:[\"03-components\",\"navigation\",\"tabs\"]\nda:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ndb:{}\nd9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$da\",\"scope\":\"$db\"}\ndd:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"de:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ndf:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne0:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"dc:{\"appInstallation\":\"$dd\",\"default\":\"$de\",\"offCanvas\":\"$df\",\"order\":\"$e0\",\"ticket\":\"$e1\"}\ne2:[\"03-components\",\"overlays\",\"modal\"]\ne4:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\ne7: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne6:{\"default\":\"$e7\"}\ne8:[\"03-components\",\"overlays\",\"off-canvas\"]\nea:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\neb:{}\ne9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ea\",\"scope\":\"$eb\"}\nec:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ned:[\"03-components\",\"overlays\",\"tooltip\"]\nef:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\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\"}\nf1:{\"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\"}\nf2:[\"03-components\",\"status\",\"counter-label\"]\nf4:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf5:{}\nf3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f4\",\"scope\":\"$f5\"}\nf7:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf6:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$f7\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nf8:[\"03-components\",\"status\",\"inline-alert\"]\nfa:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\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 \\\" + "])</script><script>self.__next_f.push([1,"(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 LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\nfd:[\"03-components\",\"status\",\"loading-spinner\"]\nff:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n100:{}\nfe:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n101:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n102:[\"03-components\",\"status\",\"progress-bar\"]\n104:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n105:{}\n103:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$104\",\"scope\":\"$105\"}\n106:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge "])</script><script>self.__next_f.push([1,"status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n107:[\"03-components\",\"status\",\"status-badge\"]\n109:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\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(id, component) {\\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 StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"status-icon\"]\n10e:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = a"])</script><script>self.__next_f.push([1,"rguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n110:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n111:[\"03-components\",\"structure\",\"accordion\"]\n113:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n114:{}\n112:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$113\",\"scope\":\"$114\"}\n115:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport "])</script><script>self.__next_f.push([1,"Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n116:[\"03-components\",\"structure\",\"column-layout\"]\n118:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\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 LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11b:[\"03-components\",\"structure\",\"layout-card\"]\n11d:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\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(\\\"LiveCode"])</script><script>self.__next_f.push([1,"Editor\\\", 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\":\"$11d\",\"scope\":\"$11e\"}\n120: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}"])</script><script>self.__next_f.push([1,"\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n121: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;\n122: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\";\nim"])</script><script>self.__next_f.push([1,"port Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n11f:{\"default\":\"$120\",\"main\":\"$121\",\"withLink\":\"$122\"}\n123:[\"03-components\",\"structure\",\"list\"]\n125:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n126:{}\n124:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) "])</script><script>self.__next_f.push([1,"{\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$125\",\"scope\":\"$126\"}\n128:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n127:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$128\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Se"])</script><script>self.__next_f.push([1,"ction from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n129:[\"03-components\",\"structure\",\"section\"]\n12b:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n12c:{}\n12a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12b\",\"scope\":\"$12c\"}\n12d:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n12e:[\"03-components\",\"structure\",\"separator\"]\n130:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n131:{}\n12f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$130\",\"scope\":\"$131\"}\n133: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  \u003cTableB"])</script><script>self.__next_f.push([1,"ody\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;\n132:{\"default\":\"$133\"}\n134:[\"03-components\",\"structure\",\"table\"]\n137:{\"mdxSource\":\"$2c\",\"examples\":\"$30\",\"slugs\":\"$31\",\"filename\":\"01-get-started/installation/index.mdx\"}\n138:{\"mdxSource\":\"$32\",\"examples\":\"$36\",\"slugs\":\"$37\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n139:{\"mdxSource\":\"$38\",\"examples\":\"$3c\",\"slugs\":\"$3d\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13a:{\"mdxSource\":\"$3e\",\"examples\":\"$41\",\"slugs\":\"$42\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13b:{\"mdxSource\":\"$43\",\"examples\":\"$46\",\"slugs\":\"$48\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13c:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"03-components/actions/button/index.mdx\"}\n13d:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n13e:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n13f:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5c\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n140:{\"mdxSource\":\"$5d\",\"examples\":\"$60\",\"slugs\":\"$61\",\"filename\":\"03-components/content/heading/index.mdx\"}\n141:{\"mdxSource\":\"$62\",\"examples\":\"$65\",\"slugs\":\"$68\",\"filename\":\"03-components/content/icon/in"])</script><script>self.__next_f.push([1,"dex.mdx\"}\n142:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n143:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"03-components/content/image/index.mdx\"}\n144:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n145:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"03-components/content/label/index.mdx\"}\n146:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n147:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n148:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"03-components/content/text/index.mdx\"}\n149:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14a:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14b:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14c:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n14d:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n14e:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n14f:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n150:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n151:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n152:{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n153:{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/navigation/breadcru"])</script><script>self.__next_f.push([1,"mb/index.mdx\"}\n154:{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c8\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n155:{\"mdxSource\":\"$c9\",\"examples\":\"$cc\",\"slugs\":\"$cd\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n156:{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n157:{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d8\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n158:{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$e2\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n159:{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e8\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15a:{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15b:{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15c:{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f8\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n15d:{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n15e:{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$102\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n15f:{\"mdxSource\":\"$103\",\"examples\":\"$106\",\"slugs\":\"$107\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n160:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n161:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n162:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n163:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n164:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$123\",\"filename\":\"03-components/structure/list/index.mdx\"}\n165:{\"mdxSource\":\"$124\",\"examples\":\"$127\",\"slugs\":\"$129\",\"filename\":\"03-components/structure/section/index.mdx"])</script><script>self.__next_f.push([1,"\"}\n166:{\"mdxSource\":\"$12a\",\"examples\":\"$12d\",\"slugs\":\"$12e\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n167:{\"mdxSource\":\"$12f\",\"examples\":\"$132\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/table/index.mdx\"}\n136:[\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n169:{\"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\"}\n16a:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n16b:{\"display\":\"inline-block\"}\n16c:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Lb\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lc\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Ld\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Le\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$Lf\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$10\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-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 flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-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\":\"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\":\"$16\",\"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\":\"$17\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$18\",\"default\":\"$19\",\"offCanvas\":\"$1a\",\"order\":\"$1b\",\"ticket\":\"$1c\"},\"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\":\"$1d\"},\"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\":\"$1e\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$1f\",\"main\":\"$20\",\"withLink\":\"$21\"},\"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\":\"$22\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L24\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L25\",null,{\"children\":[\"$\",\"$L26\",null,{\"children\":[[\"$\",\"$L27\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L28\",null,{}]}],[\"$\",\"$L29\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2a\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2b\",null,{\"children\":[[\"$\",\"$Lf\",null,{\"docs\":[{\"mdxSource\":\"$2c\",\"examples\":\"$30\",\"slugs\":\"$31\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$32\",\"examples\":\"$36\",\"slugs\":\"$37\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$38\",\"examples\":\"$3c\",\"slugs\":\"$3d\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3e\",\"examples\":\"$41\",\"slugs\":\"$42\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$43\",\"examples\":\"$46\",\"slugs\":\"$48\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5c\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5d\",\"examples\":\"$60\",\"slugs\":\"$61\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$62\",\"examples\":\"$65\",\"slugs\":\"$68\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c8\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$c9\",\"examples\":\"$cc\",\"slugs\":\"$cd\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d8\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$e2\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e8\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f8\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$102\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$103\",\"examples\":\"$106\",\"slugs\":\"$107\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$123\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$124\",\"examples\":\"$127\",\"slugs\":\"$129\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12a\",\"examples\":\"$12d\",\"slugs\":\"$12e\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$12f\",\"examples\":\"$132\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L135\",null,{\"docs\":\"$136\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L168\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L135\",null,{\"docs\":[{\"mdxSource\":\"$2c\",\"examples\":\"$30\",\"slugs\":\"$31\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$32\",\"examples\":\"$36\",\"slugs\":\"$37\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$38\",\"examples\":\"$3c\",\"slugs\":\"$3d\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3e\",\"examples\":\"$41\",\"slugs\":\"$42\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$43\",\"examples\":\"$46\",\"slugs\":\"$48\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5c\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5d\",\"examples\":\"$60\",\"slugs\":\"$61\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$62\",\"examples\":\"$65\",\"slugs\":\"$68\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c8\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$c9\",\"examples\":\"$cc\",\"slugs\":\"$cd\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d8\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$e2\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e8\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f8\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$102\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$103\",\"examples\":\"$106\",\"slugs\":\"$107\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$123\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$124\",\"examples\":\"$127\",\"slugs\":\"$129\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12a\",\"examples\":\"$12d\",\"slugs\":\"$12e\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$12f\",\"examples\":\"$132\",\"slugs\":\"$134\",\"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\":\"$169\",\"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\":\"$16a\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$16b\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$16c\",\"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/add-modal-examples/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/add-modal-examples/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/add-modal-examples/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-:R5baH1:" 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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nc:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\nd:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\ne:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\nf:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n24:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n25:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n26:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n27:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4f"])</script><script>self.__next_f.push([1,"b1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n28:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n29:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n2a:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2b:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n135:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n168:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n10:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\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;\n17:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n18:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"19:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1c:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"1d: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;\n1e:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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;\n1f: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;\n20:T563,import List, {\n  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n21: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 da"])</script><script>self.__next_f.push([1,"ta={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;\n22:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n23: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 "])</script><script>self.__next_f.push([1,"   \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;\n2d:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"2e:{\"description\":\"Willkommen in der Flow Dokumentation!\"}\n2f:{}\n2c:{\"compiledSource\":\"$2d\",\"frontmatter\":\"$2e\",\"scope\":\"$2f\"}\n30:{}\n31:[\"01-get-started\",\"installation\"]\n33:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"34:{}\n35:{}\n32:{\"compiledSource\":\"$33\",\"frontmatter\":\"$34\",\"scope\":\"$35\"}\n36:{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n37:[\"01-get-started\",\"stylesheet\"]\n39:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"3a:{}\n3b:{}\n38:{\"compiledSource\":\"$39\",\"frontmatter\":\"$3a\",\"scope\":\"$3b\"}\n3c:{}\n3d:[\"02-foundations\",\"content-guidelines\",\"fehlermeldungen\"]\n3f:{\"component\":\"ActionGroup\",\"description\":\"Die ActionGroup dient dazu zusammengehörige Buttons sinnvoll zu gruppieren. Sie wird beispielsweise für Forms oder Modals verwendet.\"}\n40:{}\n3e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$3f\",\"scope\":\"$40\"}\n41:{\"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\"}\n42:[\"03-components\",\"actions\",\"action-group\"]\n44:{\"component\":\"Action\",\"description\":\"Die Action Komponente kann um einen Button gelegt werden, um beispielsweise asynchrone Aktionen mit dem Button auszuführen.\"}\n45:{}\n43:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$44\",\"scope\":\"$45\"}\n47: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;\n46:{\"confirmation\":\"$47\",\"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\"}\n48:[\"03-components\",\"actions\",\"action\"]\n4a:{\"component\":\"Button\",\"description\":\"Der Button dient zum Ausführen von Aktionen.\"}\n4b:{}\n49:{\"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\":\"$4a\",\"scope\":\"$4b\"}\n"])</script><script>self.__next_f.push([1,"4c:{\"colors\":\"import Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cRow\u003e\\n  \u003cButton color=\\\"primary\\\"\u003eFortfahren/Aktion\u003c/Button\u003e\\n  \u003cButton color=\\\"secondary\\\"\u003eAbbrechen/Zurück\u003c/Button\u003e\\n  \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,"4d:[\"03-components\",\"actions\",\"button\"]\n4f:{\"component\":\"ContextMenu\",\"description\":\"Beim ContextMenu handelt es sich um ein Popover, das eine Liste von Aktionen oder Verlinkungen enthält.\"}\n50:{}\n4e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$4f\",\"scope\":\"$50\"}\n"])</script><script>self.__next_f.push([1,"51:{\"default\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003eItem 2\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003eItem 3\u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"icon\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\nimport { IconInfo } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    onAction={(id) =\u003e {\\n      alert(id);\\n    }}\\n  \u003e\\n    \u003cMenuItem id=\\\"1\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 1\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"2\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 2\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"3\\\"\u003e\\n      \u003cIconInfo /\u003e\\n      \u003cText\u003eItem 3\u003c/Text\u003e\\n    \u003c/MenuItem\u003e\\n  \u003c/ContextMenu\u003e\\n\u003c/ContextMenuTrigger\u003e;\\n\",\"multi-select\":\"import ContextMenu, {\\n  ContextMenuTrigger,\\n} from \\\"@mittwald/flow-react-components/ContextMenu\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport MenuItem from \\\"@mittwald/flow-react-components/MenuItem\\\";\\n\\n\u003cContextMenuTrigger\u003e\\n  \u003cButton\u003eTrigger\u003c/Button\u003e\\n  \u003cContextMenu\\n    selectionMode=\\\"multiple\\\"\\n    defaultSelectedKeys={[\\\"item2\\\", \\\"item3\\\"]}\\n  \u003e\\n    \u003cMenuItem id=\\\"item1\\\"\u003eItem 1\u003c/MenuItem\u003e\\n    \u003cMenuItem id=\\\"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,"52:[\"03-components\",\"actions\",\"context-menu\"]\n54:{\"component\":\"CopyButton\",\"description\":\"Der CopyButton dient dazu Informationen in die Zwischenablage zu kopieren.\"}\n55:{}\n53:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$54\",\"scope\":\"$55\"}\n56:{\"default\":\"import CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cCopyButton text=\\\"Kopierter Inhalt\\\" /\u003e;\\n\"}\n57:[\"03-components\",\"actions\",\"copy-button\"]\n59:{\"component\":\"Avatar\",\"description\":\"Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.\"}\n5a:{}\n58:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\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\":\"$59\",\"scope\":\"$5a\"}\n5b:{\"colors\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\nimport { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport { IconCustomer } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGustav Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGina-Lisa Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cInitials\u003eGorgio Gopher\u003c/Initials\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconHome /\u003e\\n  \u003c/Avatar\u003e\\n  \u003cAvatar\u003e\\n    \u003cIconCustomer /\u003e\\n  \u003c/Avatar\u003e\\n\u003c/Row\u003e;\\n\",\"default\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cInitials\u003eGillian Gopher\u003c/Initials\u003e\\n\u003c/Avatar\u003e;\\n\",\"icon\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\n\\n\u003cAvatar variant={1}\u003e\\n  \u003cIconHome /\u003e\\n\u003c/Avatar\u003e;\\n\",\"image\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cAvatar\u003e\\n  \u003cImage\\n    alt=\\\"Gopher\\\"\\n    src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  /\u003e\\n\u003c/Avatar\u003e;\\n\",\"sizes\":\"import Avatar from \\\"@mittwald/flow-react-components/Avatar\\\";\\nimport Initials from \\\"@mittwald/flow-react-components/Initials\\\";\\n\\n\u003cRow\u003e\\n  \u003cAvatar size=\\\"xs\\\"\u003e\\n    \u003cInitials\u003eGillian 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\"}\n5c:[\"03-components\",\"content\",\"avatar\"]\n5e:{\"component\":\"Heading\",\"description\":\"Die Heading-Komponente wird verwendet, um Überschriften anzuzeigen\"}\n5f:{}\n5d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$5e\",\"scope\":\"$5f\"}\n60:{\"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\"}\n61:[\"03-components\",\"content\",\"heading\"]\n63:{\"component\":\"Icon\",\"description\":\"Die Icon-Komponente unterstützt Tabler Icons sowie benutzerdefinierte SVGs.\"}\n64:{}\n62:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$63\",\"scope\":\"$64\"}\n66:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"67:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"65:{\"coloring\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome\\n  style={{ color: \\\"var(--primary--color--800)\\\" }}\\n/\u003e;\\n\",\"default\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cIconHome /\u003e;\\n\",\"descriptive\":\"$66\",\"functional\":\"$67\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\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,"68:[\"03-components\",\"content\",\"icon\"]\n6a:{\"component\":\"IllustratedMessage\",\"description\":\"Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.\"}\n6b:{}\n69:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true,\\n    zoom: 0.7\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6a\",\"scope\":\"$6b\"}\n6c:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport IllustratedMessage from \\\"@mittwald/flow-react-components/IllustratedMessage\\\";\\nimport { IconApp } from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cIllustratedMessage\u003e\\n  \u003cIconApp /\u003e\\n  \u003cHeading\u003eKeine Apps installiert\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Lege deine erste App an, um mit der Arbeit an deiner\\n    Webseite loszulegen.\\n  \u003c/Text\u003e\\n  \u003cButton\u003eApp anlegen\u003c/Button\u003e\\n\u003c/IllustratedMessage\u003e;\\n\",\"negative\":\"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\"}\n6d:[\"03-components\",\"content\",\"illustrated-message\"]\n6f:{\"component\":\"Image\",\"description\":\"Mit der Image-Komponente können Bilder angezeigt werden.\"}\n70:{}\n6e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$6f\",\"scope\":\"$70\"}\n71:{\"default\":\"import Image from \\\"@mittwald/flow-react-components/Image\\\";\\n\\n\u003cImage\\n  src=\\\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\\\"\\n  alt=\\\"Gopher\\\"\\n  width={200}\\n/\u003e;\\n\"}\n72:[\"03-components\",\"content\",\"image\"]\n74:{\"component\":\"InlineCode\",\"description\":\"InlineCode wird verwendet, um Code innerhalb eines Textes anzuzeigen.\"}\n75:{}\n73:{\"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\":\"$74\",\"scope\":\"$75\"}\n76:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport InlineCode from \\\"@mittwald/flow-react-components/InlineCode\\\";\\n\\n\u003cText\u003e\\n  Gib \u003cInlineCode\u003eyarn start\u003c/InlineCode\u003e ein um deine App\\n  zu starten.\\n\u003c/Text\u003e;\\n\"}\n77:[\"03-components\",\"content\",\"inline-code\"]\n79:{\"component\":\"Label\",\"description\":\"Ein Label dient der Beschreibung eines Elements, und wird beispielsweise für Formularfelder oder in LabeledValues verwendet.\"}\n7a:{}\n78:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\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\":\"$79\",\"scope\":\"$7a\"}\n7b:{\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cLabel\u003eDas ist ein Label\u003c/Label\u003e;\\n\"}\n7c:[\"03-components\",\"content\",\"label\"]\n7e:{\"component\":\"LabeledValue\",\"description\":\"Ein LabeledValue zeigt eine Information mit einem Label an.\"}\n7f:{}\n7d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$7e\",\"scope\":\"$7f\"}\n80:{\"copy-button\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport CopyButton from \\\"@mittwald/flow-react-components/CopyButton\\\";\\n\\n\u003cLabeledValue\u003e\\n  \u003cLabel\u003eProjekt ID\u003c/Label\u003e\\n  \u003cContent\u003ep-eWRhpRV\u003c/Content\u003e\\n  \u003cCopyButton text=\\\"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\"}\n81:[\"03-components\",\"content\",\"labeled-value\"]\n83:{\"component\":\"Skeleton\",\"description\":\"Das Skeleton kann als Platzhalter für Content im Ladezustand verwendet werden.\"}\n84:{}\n82:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _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\":\"$83\",\"scope\":\"$84\"}\n85:{\"custom-size\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cColumn\u003e\\n  \u003cSkeleton style={{ height: \\\"100px\\\" }} /\u003e\\n  \u003cSkeleton\\n    style={{\\n      height: \\\"100px\\\",\\n      width: \\\"100px\\\",\\n      borderRadius: \\\"50%\\\",\\n    }}\\n  /\u003e\\n\u003c/Column\u003e;\\n\",\"default\":\"import Skeleton from \\\"@mittwald/flow-react-components/Skeleton\\\";\\n\\n\u003cSkeleton /\u003e;\\n\"}\n86:[\"03-components\",\"content\",\"skeleton\"]\n88:{\"component\":\"Text\",\"description\":\"Die Text-Komponente wird verwendet, um Texte zu gruppieren.\"}\n89:{}\n87:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$88\",\"scope\":\"$89\"}\n8a:{\"default\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cText\u003eDas ist ein Text\u003c/Text\u003e;\\n\",\"emulateBoldWidth\":\"import Text from \\\"@mittwald/flow-react-components/Text\\\";\\n\\n\u003cColumn\u003e\\n  \u003cText\\n    style={{ borderInline: \\\"2px solid red\\\" }}\\n    emulateBoldWidth\\n  \u003e\\n    Das ist ein Text\\n  \u003c/Text\u003e\\n  \u003cText style={{ borderInline: \\\"2px solid red\\\" }}\u003e\\n    \u003cstrong\u003eDas ist ein Text\u003c/strong\u003e\\n  \u003c/Text\u003e\\n\u003c/Column\u003e;\\n\"}\n8b:[\"03-components\",\"content\",\"text\"]\n8d:{\"componen"])</script><script>self.__next_f.push([1,"t\":\"CheckboxButton\",\"description\":\"Der CheckboxButton verhält sich wie eine Checkbox.\"}\n8e:{}\n8c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$8d\",\"scope\":\"$8e\"}\n8f:{\"default\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\n\\n\u003cCheckboxButton\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/CheckboxButton\u003e;\\n\"}\n90:[\"03-components\",\"form-controls\",\"checkbox-button\"]\n92:{\"component\":\"CheckboxGroup\",\"description\":\"Die Checkbox Gruppe enthält eine logisch zusammenhängende Sammlung von Checkboxen\"}\n93:{}\n91:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"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\":\"$92\",\"scope\":\"$93\"}\n94:{\"buttons\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"customColumns\":\"import CheckboxButton from \\\"@mittwald/flow-react-components/CheckboxButton\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup l={[1, 1]} m={[1]}\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckboxButton value=\\\"read\\\"\u003eLesen\u003c/CheckboxButton\u003e\\n  \u003cCheckboxButton value=\\\"write\\\"\u003eSchreiben\u003c/CheckboxButton\u003e\\n\u003c/CheckboxGroup\u003e;\\n\",\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\nimport CheckboxGroup from \\\"@mittwald/flow-react-components/CheckboxGroup\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cCheckboxGroup\u003e\\n  \u003cLabel\u003eBerechtigungen\u003c/Label\u003e\\n  \u003cCheckbox value=\\\"read\\\"\u003eLesen\u003c/Checkbox\u003e\\n  \u003cCheckbox value=\\\"write\\\"\u003eSchreiben\u003c/Checkbox\u003e\\n\u003c/CheckboxGroup\u003e;\\n\"}\n95:[\"03-components\",\"form-controls\",\"checkbox-group\"]\n97:{\"component\":\"Checkbox\",\"description\":\"Die Checkbox dient dazu einen Wert zu aus- oder abzuwählen.\"}\n98:{}\n96:{\"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\":\"$97\",\"scope\":\"$98\"}\n99:{\"default\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"disabled\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isDisabled\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\",\"indeterminated\":\"import Checkbox from \\\"@mittwald/flow-react-components/Checkbox\\\";\\n\\n\u003cCheckbox isIndeterminate\u003e\\n  Ich stimme den AGBs zu und bestätige, dass ich die\\n  Datenschutzhinweise zur Kenntnis genommen habe.\\n\u003c/Checkbox\u003e;\\n\"}\n9a:[\"03-components\",\"form-controls\",\"checkbox\"]\n9c:{\"component\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\n9d:{}\n9b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$9c\",\"scope\":\"$9d\"}\n9e:{\"default\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\n9f:[\"03-components\",\"form-controls\",\"number-field\"]\na1:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\na2:{}\na0:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$a1\",\"scope\":\"$a2\"}\n"])</script><script>self.__next_f.push([1,"a3:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a4:[\"03-components\",\"form-controls\",\"radio-group\"]\na6:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\na9:[\"03-components\",\"form-controls\",\"select\"]\nab:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$ab\",\"scope\":\"$ac\"}\nad:{\"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\"}\nae:[\"03-components\",\"form-controls\",\"slider\"]\nb0:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$b0\",\"scope\":\"$b1\"}\nb2:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb3:[\"03-components\",\"form-controls\",\"switch\"]\nb5:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nb8:[\"03-components\",\"form-controls\",\"text-area\"]\nba:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$ba\",\"scope\":\"$bb\"}\n"])</script><script>self.__next_f.push([1,"bc:{\"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,"bd:[\"03-components\",\"form-controls\",\"text-field\"]\nbf:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc2:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc4:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc7:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc6:{\"contextMenu\":\"$c7\",\"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\"}\nc8:[\"03-components\",\"navigation\",\"header-navigation\"]\nca:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\ncb:{}\nc9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ca\",\"scope\":\"$cb\"}\ncc:{\"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\"}\ncd:[\"03-components\",\"navigation\",\"link\"]\ncf:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt werden kann.\"}\nd0:{}\nce:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$cf\",\"scope\":\"$d0\"}\n"])</script><script>self.__next_f.push([1,"d1:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d2:[\"03-components\",\"navigation\",\"navigation\"]\nd4:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nd7:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd6:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$d7\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\nd8:[\"03-components\",\"navigation\",\"tabs\"]\nda:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\ndb:{}\nd9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$da\",\"scope\":\"$db\"}\ndd:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"de:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ndf:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ne0:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e1:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"dc:{\"appInstallation\":\"$dd\",\"default\":\"$de\",\"offCanvas\":\"$df\",\"order\":\"$e0\",\"ticket\":\"$e1\"}\ne2:[\"03-components\",\"overlays\",\"modal\"]\ne4:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\ne7: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne6:{\"default\":\"$e7\"}\ne8:[\"03-components\",\"overlays\",\"off-canvas\"]\nea:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\neb:{}\ne9:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ea\",\"scope\":\"$eb\"}\nec:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\ned:[\"03-components\",\"overlays\",\"tooltip\"]\nef:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\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\"}\nf1:{\"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\"}\nf2:[\"03-components\",\"status\",\"counter-label\"]\nf4:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf5:{}\nf3:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$f4\",\"scope\":\"$f5\"}\nf7:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf6:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$f7\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nf8:[\"03-components\",\"status\",\"inline-alert\"]\nfa:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\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 \\\" + "])</script><script>self.__next_f.push([1,"(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 LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\nfd:[\"03-components\",\"status\",\"loading-spinner\"]\nff:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\n100:{}\nfe:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n101:{\"default\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@mitt"])</script><script>self.__next_f.push([1,"wald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n102:[\"03-components\",\"status\",\"progress-bar\"]\n104:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n105:{}\n103:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$104\",\"scope\":\"$105\"}\n106:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge "])</script><script>self.__next_f.push([1,"status=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n107:[\"03-components\",\"status\",\"status-badge\"]\n109:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\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(id, component) {\\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 StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10c:[\"03-components\",\"status\",\"status-icon\"]\n10e:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n10f:{}\n10d:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = a"])</script><script>self.__next_f.push([1,"rguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n110:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n111:[\"03-components\",\"structure\",\"accordion\"]\n113:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n114:{}\n112:{\"compiledSourc"])</script><script>self.__next_f.push([1,"e\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$113\",\"scope\":\"$114\"}\n115:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport "])</script><script>self.__next_f.push([1,"Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n116:[\"03-components\",\"structure\",\"column-layout\"]\n118:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\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 LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11b:[\"03-components\",\"structure\",\"layout-card\"]\n11d:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\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(\\\"LiveCode"])</script><script>self.__next_f.push([1,"Editor\\\", 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\":\"$11d\",\"scope\":\"$11e\"}\n120: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}"])</script><script>self.__next_f.push([1,"\u003c/Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n121: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;\n122: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\";\nim"])</script><script>self.__next_f.push([1,"port Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n11f:{\"default\":\"$120\",\"main\":\"$121\",\"withLink\":\"$122\"}\n123:[\"03-components\",\"structure\",\"list\"]\n125:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\n126:{}\n124:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) "])</script><script>self.__next_f.push([1,"{\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$125\",\"scope\":\"$126\"}\n128:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n127:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$128\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Se"])</script><script>self.__next_f.push([1,"ction from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n129:[\"03-components\",\"structure\",\"section\"]\n12b:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n12c:{}\n12a:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(pro"])</script><script>self.__next_f.push([1,"ps);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12b\",\"scope\":\"$12c\"}\n12d:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n12e:[\"03-components\",\"structure\",\"separator\"]\n130:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n131:{}\n12f:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$130\",\"scope\":\"$131\"}\n133: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  \u003cTableB"])</script><script>self.__next_f.push([1,"ody\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;\n132:{\"default\":\"$133\"}\n134:[\"03-components\",\"structure\",\"table\"]\n137:{\"mdxSource\":\"$2c\",\"examples\":\"$30\",\"slugs\":\"$31\",\"filename\":\"01-get-started/installation/index.mdx\"}\n138:{\"mdxSource\":\"$32\",\"examples\":\"$36\",\"slugs\":\"$37\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n139:{\"mdxSource\":\"$38\",\"examples\":\"$3c\",\"slugs\":\"$3d\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n13a:{\"mdxSource\":\"$3e\",\"examples\":\"$41\",\"slugs\":\"$42\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13b:{\"mdxSource\":\"$43\",\"examples\":\"$46\",\"slugs\":\"$48\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13c:{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"03-components/actions/button/index.mdx\"}\n13d:{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n13e:{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n13f:{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5c\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n140:{\"mdxSource\":\"$5d\",\"examples\":\"$60\",\"slugs\":\"$61\",\"filename\":\"03-components/content/heading/index.mdx\"}\n141:{\"mdxSource\":\"$62\",\"examples\":\"$65\",\"slugs\":\"$68\",\"filename\":\"03-components/content/icon/in"])</script><script>self.__next_f.push([1,"dex.mdx\"}\n142:{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n143:{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"03-components/content/image/index.mdx\"}\n144:{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n145:{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"03-components/content/label/index.mdx\"}\n146:{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n147:{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n148:{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"03-components/content/text/index.mdx\"}\n149:{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n14a:{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14b:{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14c:{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n14d:{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n14e:{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n14f:{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n150:{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n151:{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n152:{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n153:{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/navigation/breadcru"])</script><script>self.__next_f.push([1,"mb/index.mdx\"}\n154:{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c8\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n155:{\"mdxSource\":\"$c9\",\"examples\":\"$cc\",\"slugs\":\"$cd\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n156:{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n157:{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d8\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n158:{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$e2\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n159:{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e8\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n15a:{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15b:{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15c:{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f8\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n15d:{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n15e:{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$102\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n15f:{\"mdxSource\":\"$103\",\"examples\":\"$106\",\"slugs\":\"$107\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n160:{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n161:{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n162:{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n163:{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n164:{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$123\",\"filename\":\"03-components/structure/list/index.mdx\"}\n165:{\"mdxSource\":\"$124\",\"examples\":\"$127\",\"slugs\":\"$129\",\"filename\":\"03-components/structure/section/index.mdx"])</script><script>self.__next_f.push([1,"\"}\n166:{\"mdxSource\":\"$12a\",\"examples\":\"$12d\",\"slugs\":\"$12e\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n167:{\"mdxSource\":\"$12f\",\"examples\":\"$132\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/table/index.mdx\"}\n136:[\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n169:{\"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\"}\n16a:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n16b:{\"display\":\"inline-block\"}\n16c:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$Lb\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lc\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Ld\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Le\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$Lf\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$10\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-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 flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-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\":\"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\":\"$16\",\"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\":\"$17\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$18\",\"default\":\"$19\",\"offCanvas\":\"$1a\",\"order\":\"$1b\",\"ticket\":\"$1c\"},\"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\":\"$1d\"},\"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\":\"$1e\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können 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\":\"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\":\"$1f\",\"main\":\"$20\",\"withLink\":\"$21\"},\"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\":\"$22\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir 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\":\"$23\"},\"slugs\":[\"03-components\",\"structure\",\"table\"],\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L24\",null,{\"className\":\"layout_mobileNavigation__1XY9K\",\"children\":[\"$\",\"$L25\",null,{\"children\":[\"$\",\"$L26\",null,{\"children\":[[\"$\",\"$L27\",null,{\"color\":\"secondary\",\"variant\":\"plain\",\"children\":[\"$\",\"$L28\",null,{}]}],[\"$\",\"$L29\",null,{\"className\":\"layout_mobileNavigationOffCanvas__coBZM\",\"children\":[[\"$\",\"$L2a\",null,{\"children\":\"Menü\"}],[\"$\",\"$L2b\",null,{\"children\":[[\"$\",\"$Lf\",null,{\"docs\":[{\"mdxSource\":\"$2c\",\"examples\":\"$30\",\"slugs\":\"$31\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$32\",\"examples\":\"$36\",\"slugs\":\"$37\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$38\",\"examples\":\"$3c\",\"slugs\":\"$3d\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3e\",\"examples\":\"$41\",\"slugs\":\"$42\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$43\",\"examples\":\"$46\",\"slugs\":\"$48\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5c\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5d\",\"examples\":\"$60\",\"slugs\":\"$61\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$62\",\"examples\":\"$65\",\"slugs\":\"$68\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c8\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$c9\",\"examples\":\"$cc\",\"slugs\":\"$cd\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d8\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$e2\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e8\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f8\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$102\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$103\",\"examples\":\"$106\",\"slugs\":\"$107\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$123\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$124\",\"examples\":\"$127\",\"slugs\":\"$129\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12a\",\"examples\":\"$12d\",\"slugs\":\"$12e\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$12f\",\"examples\":\"$132\",\"slugs\":\"$134\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L135\",null,{\"docs\":\"$136\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L168\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L135\",null,{\"docs\":[{\"mdxSource\":\"$2c\",\"examples\":\"$30\",\"slugs\":\"$31\",\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":\"$32\",\"examples\":\"$36\",\"slugs\":\"$37\",\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":\"$38\",\"examples\":\"$3c\",\"slugs\":\"$3d\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"},{\"mdxSource\":\"$3e\",\"examples\":\"$41\",\"slugs\":\"$42\",\"filename\":\"03-components/actions/action-group/index.mdx\"},{\"mdxSource\":\"$43\",\"examples\":\"$46\",\"slugs\":\"$48\",\"filename\":\"03-components/actions/action/index.mdx\"},{\"mdxSource\":\"$49\",\"examples\":\"$4c\",\"slugs\":\"$4d\",\"filename\":\"03-components/actions/button/index.mdx\"},{\"mdxSource\":\"$4e\",\"examples\":\"$51\",\"slugs\":\"$52\",\"filename\":\"03-components/actions/context-menu/index.mdx\"},{\"mdxSource\":\"$53\",\"examples\":\"$56\",\"slugs\":\"$57\",\"filename\":\"03-components/actions/copy-button/index.mdx\"},{\"mdxSource\":\"$58\",\"examples\":\"$5b\",\"slugs\":\"$5c\",\"filename\":\"03-components/content/avatar/index.mdx\"},{\"mdxSource\":\"$5d\",\"examples\":\"$60\",\"slugs\":\"$61\",\"filename\":\"03-components/content/heading/index.mdx\"},{\"mdxSource\":\"$62\",\"examples\":\"$65\",\"slugs\":\"$68\",\"filename\":\"03-components/content/icon/index.mdx\"},{\"mdxSource\":\"$69\",\"examples\":\"$6c\",\"slugs\":\"$6d\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"},{\"mdxSource\":\"$6e\",\"examples\":\"$71\",\"slugs\":\"$72\",\"filename\":\"03-components/content/image/index.mdx\"},{\"mdxSource\":\"$73\",\"examples\":\"$76\",\"slugs\":\"$77\",\"filename\":\"03-components/content/inline-code/index.mdx\"},{\"mdxSource\":\"$78\",\"examples\":\"$7b\",\"slugs\":\"$7c\",\"filename\":\"03-components/content/label/index.mdx\"},{\"mdxSource\":\"$7d\",\"examples\":\"$80\",\"slugs\":\"$81\",\"filename\":\"03-components/content/labeled-value/index.mdx\"},{\"mdxSource\":\"$82\",\"examples\":\"$85\",\"slugs\":\"$86\",\"filename\":\"03-components/content/skeleton/index.mdx\"},{\"mdxSource\":\"$87\",\"examples\":\"$8a\",\"slugs\":\"$8b\",\"filename\":\"03-components/content/text/index.mdx\"},{\"mdxSource\":\"$8c\",\"examples\":\"$8f\",\"slugs\":\"$90\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"},{\"mdxSource\":\"$91\",\"examples\":\"$94\",\"slugs\":\"$95\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"},{\"mdxSource\":\"$96\",\"examples\":\"$99\",\"slugs\":\"$9a\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"},{\"mdxSource\":\"$9b\",\"examples\":\"$9e\",\"slugs\":\"$9f\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"},{\"mdxSource\":\"$a0\",\"examples\":\"$a3\",\"slugs\":\"$a4\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a5\",\"examples\":\"$a8\",\"slugs\":\"$a9\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$aa\",\"examples\":\"$ad\",\"slugs\":\"$ae\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$af\",\"examples\":\"$b2\",\"slugs\":\"$b3\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b4\",\"examples\":\"$b7\",\"slugs\":\"$b8\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$b9\",\"examples\":\"$bc\",\"slugs\":\"$bd\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$be\",\"examples\":\"$c1\",\"slugs\":\"$c2\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c3\",\"examples\":\"$c6\",\"slugs\":\"$c8\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$c9\",\"examples\":\"$cc\",\"slugs\":\"$cd\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$ce\",\"examples\":\"$d1\",\"slugs\":\"$d2\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d3\",\"examples\":\"$d6\",\"slugs\":\"$d8\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$d9\",\"examples\":\"$dc\",\"slugs\":\"$e2\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e3\",\"examples\":\"$e6\",\"slugs\":\"$e8\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$e9\",\"examples\":\"$ec\",\"slugs\":\"$ed\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$ee\",\"examples\":\"$f1\",\"slugs\":\"$f2\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f3\",\"examples\":\"$f6\",\"slugs\":\"$f8\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$f9\",\"examples\":\"$fc\",\"slugs\":\"$fd\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$fe\",\"examples\":\"$101\",\"slugs\":\"$102\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$103\",\"examples\":\"$106\",\"slugs\":\"$107\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$108\",\"examples\":\"$10b\",\"slugs\":\"$10c\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$10d\",\"examples\":\"$110\",\"slugs\":\"$111\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$112\",\"examples\":\"$115\",\"slugs\":\"$116\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$117\",\"examples\":\"$11a\",\"slugs\":\"$11b\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11c\",\"examples\":\"$11f\",\"slugs\":\"$123\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$124\",\"examples\":\"$127\",\"slugs\":\"$129\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$12a\",\"examples\":\"$12d\",\"slugs\":\"$12e\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$12f\",\"examples\":\"$132\",\"slugs\":\"$134\",\"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\":\"$169\",\"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\":\"$16a\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$16b\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$16c\",\"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/add-modal-examples/_next/static/x2v9ngCdS7SFXG00l-_Lw/_buildManifest.js b/docs/add-modal-examples/_next/static/XsuBmIygOi7O3jsQfHzjm/_buildManifest.js
similarity index 100%
rename from docs/add-modal-examples/_next/static/x2v9ngCdS7SFXG00l-_Lw/_buildManifest.js
rename to docs/add-modal-examples/_next/static/XsuBmIygOi7O3jsQfHzjm/_buildManifest.js
diff --git a/docs/add-modal-examples/_next/static/x2v9ngCdS7SFXG00l-_Lw/_ssgManifest.js b/docs/add-modal-examples/_next/static/XsuBmIygOi7O3jsQfHzjm/_ssgManifest.js
similarity index 100%
rename from docs/add-modal-examples/_next/static/x2v9ngCdS7SFXG00l-_Lw/_ssgManifest.js
rename to docs/add-modal-examples/_next/static/XsuBmIygOi7O3jsQfHzjm/_ssgManifest.js
diff --git a/docs/add-modal-examples/index.html b/docs/add-modal-examples/index.html
index 1b2f1d1bee..453fe4c29d 100644
--- a/docs/add-modal-examples/index.html
+++ b/docs/add-modal-examples/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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><title>Flow – mittwald Design System</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"x2v9ngCdS7SFXG00l-_Lw\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nb:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\nc:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\nd:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\ne:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n23:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n24:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n25:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n26:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4f"])</script><script>self.__next_f.push([1,"b1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n27:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n29:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2a:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n134:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n167:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n168:I[68648,[],\"\"]\n169:I[91385,[],\"\"]\nf:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"10:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"12: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;\n13:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"15:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n16:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n17:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"18:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n19:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1b:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"1c: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-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\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  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\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 da"])</script><script>self.__next_f.push([1,"ta={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  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und 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 "])</script><script>self.__next_f.push([1,"   \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:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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 flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n36:[\"01-get-started\",\"stylesheet\"]\n38:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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 (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\n9e:[\"03-components\",\"form-controls\",\"number-field\"]\na0:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"a2:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a3:[\"03-components\",\"form-controls\",\"radio-group\"]\na5:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\na8:[\"03-components\",\"form-controls\",\"select\"]\naa:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$aa\",\"scope\":\"$ab\"}\nac:{\"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\"}\nad:[\"03-components\",\"form-controls\",\"slider\"]\naf:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$af\",\"scope\":\"$b0\"}\nb1:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb2:[\"03-components\",\"form-controls\",\"switch\"]\nb4:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nb7:[\"03-components\",\"form-controls\",\"text-area\"]\nb9:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$b9\",\"scope\":\"$ba\"}\n"])</script><script>self.__next_f.push([1,"bb:{\"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,"bc:[\"03-components\",\"form-controls\",\"text-field\"]\nbe:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc1:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc3:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc6:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc5:{\"contextMenu\":\"$c6\",\"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\"}\nc7:[\"03-components\",\"navigation\",\"header-navigation\"]\nc9:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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 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\"}\ncc:[\"03-components\",\"navigation\",\"link\"]\nce:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt 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\"}\n"])</script><script>self.__next_f.push([1,"d0:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d1:[\"03-components\",\"navigation\",\"navigation\"]\nd3:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nd6:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd5:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$d6\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\nd7:[\"03-components\",\"navigation\",\"tabs\"]\nd9:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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\"}\ndc:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"dd:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nde:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ndf:T34e7,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Ticket erstellen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e0:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"db:{\"appInstallation\":\"$dc\",\"default\":\"$dd\",\"offCanvas\":\"$de\",\"order\":\"$df\",\"ticket\":\"$e0\"}\ne1:[\"03-components\",\"overlays\",\"modal\"]\ne3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\ne6: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne5:{\"default\":\"$e6\"}\ne7:[\"03-components\",\"overlays\",\"off-canvas\"]\ne9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\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\"}\neb:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nec:[\"03-components\",\"overlays\",\"tooltip\"]\nee:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nef:{}\ned:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ee\",\"scope\":\"$ef\"}\nf0:{\"default\":\"import 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\"}\nf1:[\"03-components\",\"status\",\"counter-label\"]\nf3:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf5:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$f6\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nf7:[\"03-components\",\"status\",\"inline-alert\"]\nf9:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\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 \\\" + "])</script><script>self.__next_f.push([1,"(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 LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\nfc:[\"03-components\",\"status\",\"loading-spinner\"]\nfe:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\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 ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@mittwa"])</script><script>self.__next_f.push([1,"ld/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"progress-bar\"]\n103:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n105:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge st"])</script><script>self.__next_f.push([1,"atus=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n106:[\"03-components\",\"status\",\"status-badge\"]\n108:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n109:{}\n107:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$108\",\"scope\":\"$109\"}\n10a:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10b:[\"03-components\",\"status\",\"status-icon\"]\n10d:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n10e:{}\n10c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arg"])</script><script>self.__next_f.push([1,"uments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10d\",\"scope\":\"$10e\"}\n10f:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n110:[\"03-components\",\"structure\",\"accordion\"]\n112:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n113:{}\n111:{\"compiledSource\""])</script><script>self.__next_f.push([1,":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$112\",\"scope\":\"$113\"}\n114:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport La"])</script><script>self.__next_f.push([1,"bel from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n115:[\"03-components\",\"structure\",\"column-layout\"]\n117:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n118:{}\n116:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$117\",\"scope\":\"$118\"}\n119:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11a:[\"03-components\",\"structure\",\"layout-card\"]\n11c:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n11d:{}\n11b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEd"])</script><script>self.__next_f.push([1,"itor\\\", 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\":\"$11c\",\"scope\":\"$11d\"}\n11f: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/"])</script><script>self.__next_f.push([1,"Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n120: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;\n121: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\";\nimpo"])</script><script>self.__next_f.push([1,"rt Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n11e:{\"default\":\"$11f\",\"main\":\"$120\",\"withLink\":\"$121\"}\n122:[\"03-components\",\"structure\",\"list\"]\n124:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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) {\\"])</script><script>self.__next_f.push([1,"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\"}\n127:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n126:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$127\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Sect"])</script><script>self.__next_f.push([1,"ion from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n128:[\"03-components\",\"structure\",\"section\"]\n12a:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n12b:{}\n129:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props"])</script><script>self.__next_f.push([1,");\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12a\",\"scope\":\"$12b\"}\n12c:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n12d:[\"03-components\",\"structure\",\"separator\"]\n12f:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n130:{}\n12e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$12f\",\"scope\":\"$130\"}\n132: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  \u003cTableBod"])</script><script>self.__next_f.push([1,"y\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;\n131:{\"default\":\"$132\"}\n133:[\"03-components\",\"structure\",\"table\"]\n136:{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-get-started/installation/index.mdx\"}\n137:{\"mdxSource\":\"$31\",\"examples\":\"$35\",\"slugs\":\"$36\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n138:{\"mdxSource\":\"$37\",\"examples\":\"$3b\",\"slugs\":\"$3c\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n139:{\"mdxSource\":\"$3d\",\"examples\":\"$40\",\"slugs\":\"$41\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13a:{\"mdxSource\":\"$42\",\"examples\":\"$45\",\"slugs\":\"$47\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13b:{\"mdxSource\":\"$48\",\"examples\":\"$4b\",\"slugs\":\"$4c\",\"filename\":\"03-components/actions/button/index.mdx\"}\n13c:{\"mdxSource\":\"$4d\",\"examples\":\"$50\",\"slugs\":\"$51\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n13d:{\"mdxSource\":\"$52\",\"examples\":\"$55\",\"slugs\":\"$56\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n13e:{\"mdxSource\":\"$57\",\"examples\":\"$5a\",\"slugs\":\"$5b\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n13f:{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"03-components/content/heading/index.mdx\"}\n140:{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$67\",\"filename\":\"03-components/content/icon/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n141:{\"mdxSource\":\"$68\",\"examples\":\"$6b\",\"slugs\":\"$6c\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n142:{\"mdxSource\":\"$6d\",\"examples\":\"$70\",\"slugs\":\"$71\",\"filename\":\"03-components/content/image/index.mdx\"}\n143:{\"mdxSource\":\"$72\",\"examples\":\"$75\",\"slugs\":\"$76\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n144:{\"mdxSource\":\"$77\",\"examples\":\"$7a\",\"slugs\":\"$7b\",\"filename\":\"03-components/content/label/index.mdx\"}\n145:{\"mdxSource\":\"$7c\",\"examples\":\"$7f\",\"slugs\":\"$80\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n146:{\"mdxSource\":\"$81\",\"examples\":\"$84\",\"slugs\":\"$85\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n147:{\"mdxSource\":\"$86\",\"examples\":\"$89\",\"slugs\":\"$8a\",\"filename\":\"03-components/content/text/index.mdx\"}\n148:{\"mdxSource\":\"$8b\",\"examples\":\"$8e\",\"slugs\":\"$8f\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n149:{\"mdxSource\":\"$90\",\"examples\":\"$93\",\"slugs\":\"$94\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14a:{\"mdxSource\":\"$95\",\"examples\":\"$98\",\"slugs\":\"$99\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14b:{\"mdxSource\":\"$9a\",\"examples\":\"$9d\",\"slugs\":\"$9e\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n14c:{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n14d:{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n14e:{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n14f:{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n150:{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n151:{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n152:{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/navigation/breadcrumb"])</script><script>self.__next_f.push([1,"/index.mdx\"}\n153:{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c7\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n154:{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n155:{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n156:{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n157:{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$e1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n158:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n159:{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15a:{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15b:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n15c:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n15d:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n15e:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$106\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n15f:{\"mdxSource\":\"$107\",\"examples\":\"$10a\",\"slugs\":\"$10b\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n160:{\"mdxSource\":\"$10c\",\"examples\":\"$10f\",\"slugs\":\"$110\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n161:{\"mdxSource\":\"$111\",\"examples\":\"$114\",\"slugs\":\"$115\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n162:{\"mdxSource\":\"$116\",\"examples\":\"$119\",\"slugs\":\"$11a\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n163:{\"mdxSource\":\"$11b\",\"examples\":\"$11e\",\"slugs\":\"$122\",\"filename\":\"03-components/structure/list/index.mdx\"}\n164:{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$128\",\"filename\":\"03-components/structure/section/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n165:{\"mdxSource\":\"$129\",\"examples\":\"$12c\",\"slugs\":\"$12d\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n166:{\"mdxSource\":\"$12e\",\"examples\":\"$131\",\"slugs\":\"$133\",\"filename\":\"03-components/structure/table/index.mdx\"}\n135:[\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$La\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lb\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Lc\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Ld\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$Le\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$f\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$10\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$11\",\"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\":\"$12\",\"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\":\"$13\",\"functional\":\"$14\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\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\":\"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\":\"$15\",\"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\":\"$16\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$17\",\"default\":\"$18\",\"offCanvas\":\"$19\",\"order\":\"$1a\",\"ticket\":\"$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\":\"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\":[[\"$\",\"$Le\",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/number-field/index.mdx\"},{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c7\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$e1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$106\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$107\",\"examples\":\"$10a\",\"slugs\":\"$10b\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$10c\",\"examples\":\"$10f\",\"slugs\":\"$110\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$111\",\"examples\":\"$114\",\"slugs\":\"$115\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$116\",\"examples\":\"$119\",\"slugs\":\"$11a\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11b\",\"examples\":\"$11e\",\"slugs\":\"$122\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$128\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$129\",\"examples\":\"$12c\",\"slugs\":\"$12d\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$12e\",\"examples\":\"$131\",\"slugs\":\"$133\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L134\",null,{\"docs\":\"$135\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L167\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L134\",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/number-field/index.mdx\"},{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c7\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$e1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$106\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$107\",\"examples\":\"$10a\",\"slugs\":\"$10b\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$10c\",\"examples\":\"$10f\",\"slugs\":\"$110\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$111\",\"examples\":\"$114\",\"slugs\":\"$115\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$116\",\"examples\":\"$119\",\"slugs\":\"$11a\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11b\",\"examples\":\"$11e\",\"slugs\":\"$122\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$128\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$129\",\"examples\":\"$12c\",\"slugs\":\"$12d\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$12e\",\"examples\":\"$131\",\"slugs\":\"$133\",\"filename\":\"03-components/structure/table/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L168\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L169\",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/add-modal-examples/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/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.js"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/9b0ae93a-c28e47c00885abd4.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/927-ff4fd183abf28a2a.js" async=""></script><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/main-app-c43a649365587b3b.js" async=""></script><title>Flow – mittwald Design System</title><link rel="icon" href="/flow-previews/docs/add-modal-examples/favicon.ico" type="image/x-icon" sizes="48x48"/><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" noModule=""></script></head><body><script src="/flow-previews/docs/add-modal-examples/_next/static/chunks/webpack-97dcb031ea27d87a.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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"style\"]\n2:HL[\"/flow-previews/docs/add-modal-examples/_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/add-modal-examples/_next/static/css/cfb88d9daade875e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L3\",null,{\"buildId\":\"XsuBmIygOi7O3jsQfHzjm\",\"assetPrefix\":\"/flow-previews/docs/add-modal-examples\",\"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\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"LinkProvider\"]\nb:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMittwald\"]\nc:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\nd:I[25325,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\ne:I[73877,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n23:I[47145,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"HeaderNavigation\"]\n24:I[3710,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Content\"]\n25:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvasTrigger\"]\n26:I[18026,[\"737\",\"static/chunks/ce067a8a-5bfcac4f"])</script><script>self.__next_f.push([1,"b1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"Button\"]\n27:I[41451,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"IconMenu\"]\n28:I[73404,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"OffCanvas\"]\n29:I[989,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Heading\"]\n2a:I[64580,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"Section\"]\n134:I[75829,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"185\",\"static/chunks/app/layout-ac87403527dc6914.js\"],\"default\"]\n167:I[69947,[\"737\",\"static/chunks/ce067a8a-5bfcac4fb1be62e9.js\",\"802\",\"static/chunks/d709487a-8b04f0f7982383f9.js\",\"975\",\"static/chunks/975-42db6d55523e5280.js\",\"592\",\"static/chunks/592-a900d46e309f5add.js\",\"460\",\"static/chunks/460-420dcc5c1c246801.js\",\"877\",\"static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js\"],\"default\"]\n168:I[68648,[],\"\"]\n169:I[91385,[],\"\"]\nf:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n"])</script><script>self.__next_f.push([1,"10:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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,"12: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;\n13:T8c4,"])</script><script>self.__next_f.push([1,"import {\n  IconApp,\n  IconBackup,\n  IconCronjob,\n  IconCustomer,\n  IconDatabase,\n  IconDomain,\n  IconEmail,\n  IconInbox,\n  IconMember,\n  IconMittwald,\n  IconProject,\n  IconSearchEngine,\n  IconServer,\n  IconSettings,\n  IconSpamProtectionOff,\n  IconSpamProtectionOn,\n  IconSshSftp,\n  IconSubdomain,\n  IconSupport,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMittwald\u003c/Label\u003e\n    \u003cIconMittwald /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eProject\u003c/Label\u003e\n    \u003cIconProject /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eServer\u003c/Label\u003e\n    \u003cIconServer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCustomer\u003c/Label\u003e\n    \u003cIconCustomer /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSupport\u003c/Label\u003e\n    \u003cIconSupport /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eE-Mail\u003c/Label\u003e\n    \u003cIconEmail /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eApp\u003c/Label\u003e\n    \u003cIconApp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDomain\u003c/Label\u003e\n    \u003cIconDomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSubdomain\u003c/Label\u003e\n    \u003cIconSubdomain /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDatabase\u003c/Label\u003e\n    \u003cIconDatabase /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBackup\u003c/Label\u003e\n    \u003cIconBackup /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCronjob\u003c/Label\u003e\n    \u003cIconCronjob /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMember\u003c/Label\u003e\n    \u003cIconMember /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSettings\u003c/Label\u003e\n    \u003cIconSettings /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch Engine\u003c/Label\u003e\n    \u003cIconSearchEngine /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSsh Sftp\u003c/Label\u003e\n    \u003cIconSshSftp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eInbox\u003c/Label\u003e\n    \u003cIconInbox /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection Off\u003c/Label\u003e\n    \u003cIconSpamProtectionOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSpam Protection On\u003c/Label\u003e\n    \u003cIconSpamProtectionOn /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"14:Tf4b,"])</script><script>self.__next_f.push([1,"import {\n  IconBackLink,\n  IconCheck,\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronUp,\n  IconClose,\n  IconCode,\n  IconContextMenu,\n  IconCopy,\n  IconDashboard,\n  IconDate,\n  IconDelete,\n  IconExternalLink,\n  IconFilter,\n  IconHide,\n  IconHome,\n  IconListView,\n  IconLogout,\n  IconMinus,\n  IconNotification,\n  IconPlus,\n  IconRadioOff,\n  IconRadioOn,\n  IconRandom,\n  IconSave,\n  IconSearch,\n  IconShare,\n  IconShow,\n  IconSorting,\n  IconTerminate,\n  IconTileView,\n  IconTime,\n} from \"@mittwald/flow-react-components/Icons\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport ColumnLayout from \"@mittwald/flow-react-components/ColumnLayout\";\n\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHome\u003c/Label\u003e\n    \u003cIconHome /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eNotification\u003c/Label\u003e\n    \u003cIconNotification /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDashboard\u003c/Label\u003e\n    \u003cIconDashboard /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eLogout\u003c/Label\u003e\n    \u003cIconLogout /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSearch\u003c/Label\u003e\n    \u003cIconSearch /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTileView\u003c/Label\u003e\n    \u003cIconTileView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eListView\u003c/Label\u003e\n    \u003cIconListView /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eFilter\u003c/Label\u003e\n    \u003cIconFilter /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSorting\u003c/Label\u003e\n    \u003cIconSorting /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDelete\u003c/Label\u003e\n    \u003cIconDelete /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTerminate\u003c/Label\u003e\n    \u003cIconTerminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCopy\u003c/Label\u003e\n    \u003cIconCopy /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eBacklink\u003c/Label\u003e\n    \u003cIconBackLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eExternal Link\u003c/Label\u003e\n    \u003cIconExternalLink /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Down\u003c/Label\u003e\n    \u003cIconChevronDown /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Left\u003c/Label\u003e\n    \u003cIconChevronLeft /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevron Right\u003c/Label\u003e\n    \u003cIconChevronRight /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eChevronUp\u003c/Label\u003e\n    \u003cIconChevronUp /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eClose\u003c/Label\u003e\n    \u003cIconClose /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eHide\u003c/Label\u003e\n    \u003cIconHide /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShow\u003c/Label\u003e\n    \u003cIconShow /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRandom\u003c/Label\u003e\n    \u003cIconRandom /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eDate\u003c/Label\u003e\n    \u003cIconDate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eTime\u003c/Label\u003e\n    \u003cIconTime /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003ePlus\u003c/Label\u003e\n    \u003cIconPlus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eMinus\u003c/Label\u003e\n    \u003cIconMinus /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eContext Menu\u003c/Label\u003e\n    \u003cIconContextMenu /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCode\u003c/Label\u003e\n    \u003cIconCode /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Checked\u003c/Label\u003e\n    \u003cIconCheckboxChecked /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Empty\u003c/Label\u003e\n    \u003cIconCheckboxEmpty /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheckbox Indeterminate\u003c/Label\u003e\n    \u003cIconCheckboxIndeterminate /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOff\u003c/Label\u003e\n    \u003cIconRadioOff /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eRadioOn\u003c/Label\u003e\n    \u003cIconRadioOn /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eSave\u003c/Label\u003e\n    \u003cIconSave /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eCheck\u003c/Label\u003e\n    \u003cIconCheck /\u003e\n  \u003c/LabeledValue\u003e\n  \u003cLabeledValue\u003e\n    \u003cLabel\u003eShare\u003c/Label\u003e\n    \u003cIconShare /\u003e\n  \u003c/LabeledValue\u003e\n\u003c/ColumnLayout\u003e;\n"])</script><script>self.__next_f.push([1,"15:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\n\u003cHeaderNavigation aria-label=\"Header navigation\"\u003e\n  \u003cButton\u003e\n    \u003cIconSearch /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconSupport /\u003e\n  \u003c/Button\u003e\n  \u003cButton\u003e\n    \u003cIconNotification /\u003e\n  \u003c/Button\u003e\n  \u003cContextMenuTrigger\u003e\n    \u003cButton\u003e\n      \u003cAvatar\u003e\n        \u003cImage\n          alt=\"Gopher\"\n          src=\"https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544\"\n        /\u003e\n      \u003c/Avatar\u003e\n    \u003c/Button\u003e\n    \u003cContextMenu\u003e\n      \u003cMenuItem\u003e\n        \u003cIconSettings /\u003e\n        \u003cText\u003eProfil\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n      \u003cMenuItem\u003e\n        \u003cIconLogout /\u003e\n        \u003cText\u003eLogout\u003c/Text\u003e\n      \u003c/MenuItem\u003e\n    \u003c/ContextMenu\u003e\n  \u003c/ContextMenuTrigger\u003e\n\u003c/HeaderNavigation\u003e;\n16:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n"])</script><script>self.__next_f.push([1,"        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n      \u003c/TextField\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab id=\"storage\"\u003e\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eSpeicherplatz\u003c/Heading\u003e\n      \u003cLabeledValue\u003e\n        \u003cLabel\u003eVerfügbarer Speicherplatz\u003c/Label\u003e\n        \u003cText\u003e2.4 GB\u003c/Text\u003e\n      \u003c/LabeledValue\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeader\u003e\n        \u003cHeading\u003eSpamschutz\u003c/Heading\u003e\n        \u003cSwitch\u003eSpamfilter\u003c/Switch\u003e\n      \u003c/Header\u003e\n      \u003cText\u003e\n        Der Spamfilter schützt dich vor ungewollten E-Mails.\n        Niemand will Müll in seinem Postfach, daher\n        empfehlen wir den Spamschutz immer aktiviert zu\n        lassen.\n      \u003c/Text\u003e\n    \u003c/Section\u003e\n  \u003c/Tab\u003e\n\u003c/Tabs\u003e;\n17:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"18:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\n19:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"1b:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"1c: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-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domai"])</script><script>self.__next_f.push([1,"n konnte kein SSL-Zertifikat\n      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  \u003cListFilter\u003cDomain\u003e\n    property=\"type\"\n    mode=\"some\"\n    name=\"Type\"\n  /\u003e\n  \u003cListSorting\u003cDomain\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  Lis"])</script><script>self.__next_f.push([1,"tItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport {\n  type Domain,\n  domains,\n} from \"@/content/03-components/structure/list/examples/domainApi\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\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 da"])</script><script>self.__next_f.push([1,"ta={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  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und 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 "])</script><script>self.__next_f.push([1,"   \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:Tbd5,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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 das die\\naktuellen Inhalte in dieser Form bestehen bleiben. Wir freuen uns über jedes\\nFeedback zum aktuellen Entwicklungsstand!\"]\n        })\n      })]\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Installation der Flow React Component Library\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Die Flow React Component Library kann mit einem Package Manager wie \", _jsx(_components.code, {\n        children: \"npm\"\n      }), \" or\\n\", _jsx(_components.code, {\n        children: \"yarn\"\n      }), \" installiert werden.\"]\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        className: \"language-shell\",\n        children: \"yarn add @mittwald/flow-react-components\\n\"\n      })\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Zur leichteren Verwaltung der Abhängigkeiten werden alle Komponenten innerhalb\\ndiese Packages bereitgestellt.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h2, {\n      children: \"Styles importieren\"\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Um die Komponenten Styles zu verwenden, musst du das Stylesheet importieren.\\nFüge diese Zeile zum Einstiegspunkt deines Projektes hinzu.\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \"import \\\"@mittwald/flow-react-components/styles\\\";\\n\"\n      })\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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:T1884,"])</script><script>self.__next_f.push([1,"\"use strict\";\nconst {Fragment: _Fragment, 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,\\nKomponenten basiertem und leicht zu verstehendem Schema.\"\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Generelle Klassennamen Auszeichnungen\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Alle Klassennamen sind in Lowercase geschrieben und benutzen \", _jsx(_components.code, {\n        children: \"-\"\n      }), \" um Wörter zu\\ntrennen und \", _jsx(_components.code, {\n        children: \"--\"\n      }), \" um logische Abschnitte zu unterteilen.\"]\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Der erste logische Abschnitt ist immer der \", _jsx(_components.code, {\n        children: \"flow\"\n      }), \" Namespace. Andere Abschnitte\\nkönnten beispielsweise so aussehen:\"]\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button\\n.flow--heading\\n.flow--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Sub-Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--navigation\\n.flow--navigation--navigation-item\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: Verschiedene Varianten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--primary\\n.flow--inline-alert--danger\\n.flow--icon--fixed-width\\n\"\n      })\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Spezialisierung: In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsx(_components.pre, {\n      children: _jsx(_components.code, {\n        children: \".flow--button--icon\\n.flow--inline-alert--status-icon\\n\"\n      })\n    }), \"\\n\", _jsx(_components.hr, {}), \"\\n\", _jsx(_components.h3, {\n      children: \"Ein Hinweis zur Spezialisierung\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Klassennamen die verwendet werden, um die Basiskomponente zu spezialisieren,\\nmüssen immer \", _jsx(_components.strong, {\n        children: \"zusätzlich zum Basis-Klassennamen\"\n      }), \" verwendet werden.\"]\n    }), \"\\n\", _jsx(_components.p, {\n      children: \"Hier ein paar Beispiele um die diese Anforderung zu verdeutlichen:\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"Kombinierte Varianten\"\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"multiple-variants\"\n    }), \"\\n\", _jsx(_components.h4, {\n      children: \"In einer Komposition verwendete Komponenten\"\n    }), \"\\n\", _jsxs(_components.p, {\n      children: [\"Es ist gängige Praxis größere Komponenten aus bereits bestehenden kleineren\\nKomponenten zusammenzusetzen. Der InlineAlert besteht beispielsweise aus einem\\nIcon, einer Heading und optionalem Inhalt. Die verwendeten Komponenten müssen\\nihren Basis-Klassennamen für das grundsätzliche Styling erhalten (\", _jsx(_components.code, {\n        children: \"flow--icon\"\n      }), \"),\\nsowie den spezialisierten Klassennamen (\", _jsx(_components.code, {\n        children: \"flow--inline-alert--status-icon\"\n      }), \") um\\nspezifische Styles des Inline Alerts zu erhalten.\"]\n    }), \"\\n\", _jsx(LiveCodeEditor, {\n      example: \"composition\"\n    })]\n  });\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = {\n    ..._provideComponents(),\n    ...props.components\n  };\n  return MDXLayout ? _jsx(MDXLayout, {\n    ...props,\n    children: _jsx(_createMdxContent, {\n      ...props\n    })\n  }) : _createMdxContent(props);\n}\nreturn {\n  default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n  throw new Error(\"Expected \" + (component ? \"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 flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"}\n36:[\"01-get-started\",\"stylesheet\"]\n38:T265e,"])</script><script>self.__next_f.push([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 schief gelaufen 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 dicht 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\":\"NumberField\",\"description\":\"Das NumberField dient der Eingabe von Zahlen.\"}\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 (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\n"])</script><script>self.__next_f.push([1,"function MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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 NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldDescription from \\\"@mittwald/flow-react-components/FieldDescription\\\";\\n\\n\u003cNumberField minValue={0} maxValue={100}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldDescription\u003eGib dein Alter ein\u003c/FieldDescription\u003e\\n\u003c/NumberField\u003e;\\n\",\"disabled\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isDisabled\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"invalid\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport FieldError from \\\"@mittwald/flow-react-components/FieldError\\\";\\n\\n\u003cNumberField isInvalid value={-1}\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n  \u003cFieldError\u003eUngültige Eingabe\u003c/FieldError\u003e\\n\u003c/NumberField\u003e;\\n\",\"required\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField isRequired\u003e\\n  \u003cLabel\u003eAlter\u003c/Label\u003e\\n\u003c/NumberField\u003e;\\n\",\"unit\":\"import NumberField from \\\"@mittwald/flow-react-components/NumberField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNumberField\\n  formatOptions={{\\n    style: \\\"unit\\\",\\n    unit: \\\"gigabyte\\\",\\n  }}\\n  defaultValue={12}\\n\u003e\\n  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\\n\u003c/NumberField\u003e;"])</script><script>self.__next_f.push([1,"\\n\"}\n9e:[\"03-components\",\"form-controls\",\"number-field\"]\na0:{\"component\":\"RadioGroup\",\"description\":\"Eine RadioGroup ist eine Liste von Optionen, von denen genau eine ausgewählt werden muss.\"}\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\"}\n"])</script><script>self.__next_f.push([1,"a2:{\"buttons\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"content\":\"import RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"domain\\\" aria-label=\\\"Domain\\\"\u003e\\n  \u003cRadioButton value=\\\"domain\\\"\u003e\\n    \u003cText\u003eDomain buchen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Du hast eine Wunsch-Domain? Kein Problem wir helfen\\n      dir die passende Domain für dich zu finden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"virtualHost\\\"\u003e\\n    \u003cText\u003eVirtual Host einrichten\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Die Domain bleibt bei deinem bisherigen Anbieter, du\\n      kannst sie aber für deine Website in unserem mStudio\\n      verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"subdomain\\\"\u003e\\n    \u003cText\u003eSubdomain anlegen\u003c/Text\u003e\\n    \u003cContent\u003e\\n      Eine Subdomain von einer bereits vorhandenen Domain\\n      erstellen, um sie für dein Projekt zu verwenden.\\n    \u003c/Content\u003e\\n  \u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"customColumns\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  RadioButton,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup\\n  defaultValue=\\\"admin\\\"\\n  s={[1, 1]}\\n  m={[1, 1, 1]}\\n  l={[1, 1, 1, 1]}\\n\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadioButton value=\\\"admin\\\"\u003eAdministrator\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"member\\\"\u003eMitglied\u003c/RadioButton\u003e\\n  \u003cRadioButton value=\\\"accountant\\\"\u003eBuchhalter\u003c/RadioButton\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"default\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\u003c/Radio\u003e\\n  \u003cRadio value=\\\"member\\\"\u003eMitglied\u003c/Radio\u003e\\n  \u003cRadio value=\\\"accountant\\\"\u003eBuchhalter\u003c/Radio\u003e\\n\u003c/RadioGroup\u003e;\\n\",\"segmented\":\"import Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport RadioGroup, {\\n  Radio,\\n} from \\\"@mittwald/flow-react-components/RadioGroup\\\";\\n\\n\u003cRadioGroup defaultValue=\\\"admin\\\" variant=\\\"segmented\\\"\u003e\\n  \u003cLabel\u003eRolle\u003c/Label\u003e\\n  \u003cRadio value=\\\"admin\\\"\u003eAdministrator\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,"a3:[\"03-components\",\"form-controls\",\"radio-group\"]\na5:{\"component\":\"Select\",\"description\":\"Die Select-Komponente bietet eine Liste von Optionen an, von denen eine ausgewählt werden kann.\"}\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:{\"default\":\"import Select, {\\n  Option,\\n} from \\\"@mittwald/flow-react-components/Select\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cSelect\u003e\\n  \u003cLabel\u003eApp\u003c/Label\u003e\\n  \u003cOption\u003eWordPress\u003c/Option\u003e\\n  \u003cOption\u003eTYPO3\u003c/Option\u003e\\n  \u003cOption\u003eContao\u003c/Option\u003e\\n  \u003cOption\u003eDrupal\u003c/Option\u003e\\n  \u003cOption\u003eJoomla!\u003c/Option\u003e\\n  \u003cOption\u003eMatomo\u003c/Option\u003e\\n\u003c/Select\u003e;\\n\"}\na8:[\"03-components\",\"form-controls\",\"select\"]\naa:{\"component\":\"Slider\",\"description\":\"Die Slider-Komponente dient zur Auswahl von Zahlenwerten innerhalb einer vorgegebenen Range.\"}\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(\\\"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\":\"$aa\",\"scope\":\"$ab\"}\nac:{\"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\"}\nad:[\"03-components\",\"form-controls\",\"slider\"]\naf:{\"component\":\"Switch\",\"description\":\"Die Switch-Komponente stellt einen Schalter dar, mit dem eine Option aktiviert oder deaktiviert 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 \\\" + (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\":\"$af\",\"scope\":\"$b0\"}\nb1:{\"default\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch defaultSelected\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"disabled\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch isDisabled\u003eAutoresponder\u003c/Switch\u003e;\\n\",\"leading-label\":\"import Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSwitch labelPosition=\\\"leading\\\"\u003eAutoresponder\u003c/Switch\u003e;\\n\"}\nb2:[\"03-components\",\"form-controls\",\"switch\"]\nb4:{\"component\":\"TextArea\",\"description\":\"Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.\"}\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(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:{\"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\"}\nb7:[\"03-components\",\"form-controls\",\"text-area\"]\nb9:{\"component\":\"TextField\",\"description\":\"Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein erforderliches Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.\"}\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  }) : _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\":\"$b9\",\"scope\":\"$ba\"}\n"])</script><script>self.__next_f.push([1,"bb:{\"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,"bc:[\"03-components\",\"form-controls\",\"text-field\"]\nbe:{\"component\":\"Breadcrumb\",\"description\":\"Die Breadcrumb zeigt die aktuelle Position in der Hierarchie der Website und bietet die Möglichkeit schnell zu höheren Navigationsebenen zu springen.\"}\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:{\"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\"}\nc1:[\"03-components\",\"navigation\",\"breadcrumb\"]\nc3:{\"component\":\"HeaderNavigation\",\"description\":\"Bei der HeaderNavigation handelt es sich um eine horizontal dargestellte Navigation, die als Hauptnavigation einer Seite verwendet werden kann.\"}\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  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\nc6:T50e,import Button from \"@mittwald/flow-react-components/Button\";\nimport HeaderNavigation from \"@mittwald/flow-react-components/HeaderNavigation\";\nimport {\n  IconLogout,\n  IconNotification,\n  IconSettings,\n  IconSupport,\n  IconSearch,\n} from \"@mittwald/flow-react-components/Icons\";\nimport ContextMenu, {\n  ContextMenuTrigger,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport Avatar from \"@mittwald/flow-react-components/Avatar\";\nimport Image from \"@mittwald/flow-react-components/Image\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport MenuItem from \"@mittwald/flow-react-components/MenuItem\";\n\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;\nc5:{\"contextMenu\":\"$c6\",\"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\"}\nc7:[\"03-components\",\"navigation\",\"header-navigation\"]\nc9:{\"component\":\"Link\",\"description\":\"Die Link-Komponente kann zur Navigation innerhalb der Seite oder zu externen Zielen genutzt werden.\"}\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 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\"}\ncc:[\"03-components\",\"navigation\",\"link\"]\nce:{\"component\":\"Navigation\",\"description\":\"Bei der Navigation handelt es sich um eine Liste von Links, die optional auch in Gruppen unterteilt 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\"}\n"])</script><script>self.__next_f.push([1,"d0:{\"collapsable\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup collapsable\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"default\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Companies\\\"\u003e\\n  \u003cLink href=\\\"https://www.apple.com\\\"\u003eApple\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.mittwald.de\\\" aria-current=\\\"page\\\"\u003e\\n    mittwald\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.adobe.com\\\"\u003eAdobe\u003c/Link\u003e\\n  \u003cLink href=\\\"https://www.google.com\\\"\u003eGoogle\u003c/Link\u003e\\n\u003c/Navigation\u003e;\\n\",\"groups\":\"import Navigation, {\\n  NavigationGroup,\\n} from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cNavigation aria-label=\\\"Main navigation\\\"\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eAllgemein\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDashboard\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n      Performance\\n    \u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n  \u003cNavigationGroup\u003e\\n    \u003cLabel\u003eKomponenten\u003c/Label\u003e\\n    \u003cLink href=\\\"#\\\"\u003eApps\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDatenbanken\u003c/Link\u003e\\n    \u003cLink href=\\\"#\\\"\u003eDomains\u003c/Link\u003e\\n  \u003c/NavigationGroup\u003e\\n\u003c/Navigation\u003e;\\n\",\"icons\":\"import Navigation from \\\"@mittwald/flow-react-components/Navigation\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport {\\n  IconCustomer,\\n  IconProject,\\n  IconServer,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cNavigation aria-label=\\\"Main menu\\\"\u003e\\n  \u003cLink href=\\\"#\\\"\u003e\\n    \u003cIconCustomer /\u003e\\n    \u003cText\u003eOrganisationen\u003c/Text\u003e\\n  \u003c/Link\u003e\\n  \u003cLink href=\\\"#\\\" aria-current=\\\"page\\\"\u003e\\n    \u003cIconServer /\u003e\\n    \u003cText\u003eServer\u003c/Text\u003e\\n  \u003c/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,"d1:[\"03-components\",\"navigation\",\"navigation\"]\nd3:{\"component\":\"Tabs\",\"description\":\"Tabs erlauben dem Nutzer zwischen verschiedenen Inhaltsbereichen zu wechseln.\"}\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\"}\nd6:T5cf,import Tabs, {\n  Tab,\n  TabTitle,\n} from \"@mittwald/flow-react-components/Tabs\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport LabeledValue from \"@mittwald/flow-react-components/LabeledValue\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Header from \"@mittwald/flow-react-components/Header\";\nimport Switch from \"@mittwald/flow-react-components/Switch\";\n\n\u003cTabs\u003e\n  \u003cTab\u003e\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\n    \u003cSection\u003e\n      \u003cHeading\u003eAllgemein\u003c/Heading\u003e\n      \u003cTextField defaultValue=\"example@mittwald.de\"\u003e\n        \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\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;\nd5:{\"collapsed\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs style={{ width: \\\"250px\\\" }}\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"content\":\"$d6\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"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\"}\nd7:[\"03-components\",\"navigation\",\"tabs\"]\nd9:{\"component\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"}\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\"}\ndc:T161a,"])</script><script>self.__next_f.push([1,"import { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport { Modal } from \"@mittwald/flow-react-components/Modal\";\nimport { Content } from \"@mittwald/flow-react-components/Content\";\nimport { Text } from \"@mittwald/flow-react-components/Text\";\nimport { Initials } from \"@mittwald/flow-react-components/Initials\";\nimport { Avatar } from \"@mittwald/flow-react-components/Avatar\";\nimport List, {\n  ListItem,\n  ListItemView,\n  ListStaticData,\n} from \"@mittwald/flow-react-components/List\";\nimport { Heading } from \"@mittwald/flow-react-components/Heading\";\nimport { ActionGroup } from \"@mittwald/flow-react-components/ActionGroup\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Action } from \"@mittwald/flow-react-components/Action\";\nimport { TextField } from \"@mittwald/flow-react-components/TextField\";\nimport { Label } from \"@mittwald/flow-react-components/Label\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\n\nexport default () =\u003e {\n  const appSelectionController = useOverlayController();\n  const configurationController = useOverlayController();\n\n  interface App {\n    name: string;\n    description: string;\n    versions: string;\n  }\n\n  const apps: App[] = [\n    {\n      name: \"WordPress\",\n      description:\n        \"Eins der meist genutzten CMS. Perfekt für Blogs und Websites.\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"TYPO3\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Joomla!\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Matomo\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Contao\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n    {\n      name: \"Shopware\",\n      description:\n        \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\",\n      versions: \"Versionen X.XX bis X.XX\",\n    },\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={appSelectionController.open}\n      \u003e\n        App installieren\n      \u003c/Button\u003e\n      \u003cModal\n        offCanvas\n        controller={appSelectionController}\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eApp installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cTextField placeholder=\"Suche\" /\u003e\n          \u003cList batchSize={6} tiles\u003e\n            \u003cListStaticData data={apps} /\u003e\n            \u003cListItemView\u003cApp\u003e\u003e\n              {(app: App) =\u003e (\n                \u003cListItem\n                  onPress={() =\u003e {\n                    appSelectionController.close();\n                    configurationController.open();\n                  }}\n                \u003e\n                  \u003cAvatar variant={1}\u003e\n                    \u003cInitials\u003e{app.name}\u003c/Initials\u003e\n                  \u003c/Avatar\u003e\n                  \u003cHeading\u003e{app.name}\u003c/Heading\u003e\n                  \u003cText\u003e{app.versions}\u003c/Text\u003e\n                  \u003cContent\u003e{app.description}\u003c/Content\u003e\n                \u003c/ListItem\u003e\n              )}\n            \u003c/ListItemView\u003e\n          \u003c/List\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        offCanvas\n        controller={configurationController}\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eWordpress installieren\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eBezeichnung\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired defaultValue=\"6.5.3\"\u003e\n              \u003cLabel\u003eVersion\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eGrundeinstellungen\u003c/Heading\u003e\n            \u003cText\u003e\n              Gib hier die allgemeinen Daten für deine\n              WordPress Installation ein.\n            \u003c/Text\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eTitel der Website\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003eDomain\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eAdmin\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege hier den Admin für deine WordPress\n              Installation an.\n            \u003c/Text\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"mmustermann\"\n            \u003e\n              \u003cLabel\u003eBenutzername\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField isRequired\u003e\n              \u003cLabel\u003ePasswort\u003c/Label\u003e\n            \u003c/TextField\u003e\n            \u003cTextField\n              isRequired\n              defaultValue=\"m.musterman@example.de\"\n            \u003e\n              \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n            \u003c/TextField\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Wordpress installieren\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"dd:T5b3,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\nde:T5bd,import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/"])</script><script>self.__next_f.push([1,"Action\";\nimport { 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\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003e\n            Organisation anlegen\n          \u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n          Abbrechen\n        \u003c/Button\u003e\n      \u003c/Action\u003e\n    \u003c/ActionGroup\u003e\n  \u003c/Modal\u003e\n\u003c/ModalTrigger\u003e;\ndf:T34c4,"])</script><script>self.__next_f.push([1,"import Modal from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioButton,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { Slider } from \"@mittwald/flow-react-components/Slider\";\nimport { Link } from \"@mittwald/flow-react-components/Link\";\nimport { CheckboxButton } from \"@mittwald/flow-react-components/CheckboxButton\";\nimport { useOverlayController } from \"@mittwald/flow-react-components/controller\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\n\nexport default () =\u003e {\n  const customerController = useOverlayController();\n  const serverController = useOverlayController();\n\n  return (\n    \u003c\u003e\n      \u003cButton\n        color=\"accent\"\n        onPress={serverController.open}\n      \u003e\n        Server buchen\n      \u003c/Button\u003e\n\n      \u003cModal\n        controller={serverController}\n        offCanvas\n        size=\"l\"\n      \u003e\n        \u003cHeading\u003eSpaceServer buchen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cdiv\n            style={{\n              position: \"sticky\",\n              background: \"#E0EBFF\",\n              padding: \"16px 24px\",\n              marginTop: \"-24px\",\n              marginInline: \"-24px\",\n              top: \"-24px\",\n              zIndex: \"1\",\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"24px\",\n              borderBottom: \"1px solid #909090\",\n            }}\n          \u003e\n            \u003cdiv style={{ flexGrow: \"1\" }}\u003e\n              \u003cHeading levelVisual={3}\u003eGesamt\u003c/Heading\u003e\n              \u003cText\u003ealle Preise zzgl. USt.\u003c/Text\u003e\n            \u003c/div\u003e\n            \u003cText\u003eMonatlich:\u003c/Text\u003e\n            \u003cHeading levelVisual={1}\u003e50 €\u003c/Heading\u003e\n          \u003c/div\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout m={[3, 2]}\u003e\n              \u003cSection\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eServername\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cRadioGroup defaultValue=\"1\" s={[1, 1, 1]}\u003e\n                  \u003cLabel\u003eRessourcen wählen\u003c/Label\u003e\n                  \u003cRadioButton value=\"1\"\u003e\n                    \u003cText\u003e2 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"2\"\u003e\n                    \u003cText\u003e4 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"3\"\u003e\n                    \u003cText\u003e8 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"4\"\u003e\n                    \u003cText\u003e16 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"5\"\u003e\n                    \u003cText\u003e32 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                  \u003cRadioButton value=\"6\"\u003e\n                    \u003cText\u003e64 vCPU\u003c/Text\u003e\n                    \u003cContent\u003e4 GB RAM\u003c/Content\u003e\n                  \u003c/RadioButton\u003e\n                \u003c/RadioGroup\u003e\n                \u003cText\u003e\n                  Auf deinem Space-Server kannst du\n                  unlimitiert viele Projekte anlegen. Wir\n                  empfehlen jedoch eine maximale Anzahl -\n                  basierend auf Analysen und langjähriger\n                  Erfahrung.\n                \u003c/Text\u003e\n                \u003cSlider\n                  formatOptions={{\n                    style: \"unit\",\n                    unit: \"gigabyte\",\n                  }}\n                  minValue={20}\n                  maxValue={2000}\n                  defaultValue={200}\n                  step={20}\n                \u003e\n                  \u003cLabel\u003eSpeicherplatz\u003c/Label\u003e\n                \u003c/Slider\u003e\n              \u003c/Section\u003e\n              \u003cdiv\n                style={{\n                  backgroundColor: \"#f8f8f8\",\n                  border: \"1px solid #909090\",\n                  borderRadius: \"4px\",\n                  padding: \"24px\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"16px\",\n                }}\n              \u003e\n                \u003cHeading\u003eDeine Konfiguration\u003c/Heading\u003e\n                \u003cText\u003e\n                  \u003cb\u003eArtikel: Space-Server\u003c/b\u003e\n                \u003c/Text\u003e\n                \u003cColumnLayout s={[2, 1]}\u003e\n                  \u003cText\u003e4vCPU/8 GB RAM\u003c/Text\u003e\n                  \u003cText\u003e45,00 €\u003c/Text\u003e\n                  \u003cText\u003e50 GB Speichplatz\u003c/Text\u003e\n                  \u003cText\u003einklusive\u003c/Text\u003e\n                  \u003cText\u003e100 GB Speicherplatz\u003c/Text\u003e\n                  \u003cText\u003e5,00 €\u003c/Text\u003e\n                \u003c/ColumnLayout\u003e\n                \u003cCheckboxButton\n                  style={{ marginTop: \"auto\" }}\n                \u003e\n                  10 Tage kostenlos testen!\n                \u003c/CheckboxButton\u003e\n              \u003c/div\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eOrganisation wählen\u003c/Heading\u003e\n            \u003cRadioGroup\n              aria-label=\"Organisation\"\n              defaultValue=\"1\"\n              l={[1, 1]}\n            \u003e\n              \u003cRadioButton value=\"1\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n              \u003cRadioButton value=\"2\"\u003e\n                \u003cText\u003eAgentur Schmidt\u003c/Text\u003e\n                \u003cContent\u003e\n                  Günther Schmitdt\n                  \u003cbr /\u003e\n                  Am Horstweg 13, 32361 Musterhausen\n                  \u003cbr /\u003e\n                  Tel. +49 1234 124568\n                  \u003cbr /\u003e\n                  agentur.schmidt@web.de\n                  \u003cbr /\u003e\n                  Rechnung\n                \u003c/Content\u003e\n              \u003c/RadioButton\u003e\n            \u003c/RadioGroup\u003e\n\n            \u003cButton\n              variant=\"plain\"\n              style={{ alignSelf: \"center\" }}\n              onPress={customerController.open}\n            \u003e\n              Neue Organisation anlegen\n            \u003c/Button\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eBestellung prüfen\u003c/Heading\u003e\n            \u003cText\u003e\n              Überprüfe die Angaben zu deiner Bestellung.\n              Die Kosten dieser Bestellung werden auf der\n              nächsten Rechnung vermerkt, die per E-Mail an\n              agentur-schmidt@web.de geschickt wird.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\u003e\n              \u003cText\u003e\n                Mit dem Klick auf “Kostenpflichtig buchen”\n                erkläre ich, dass ich mit den{\" \"}\n                \u003cLink\u003eAGB\u003c/Link\u003e einverstanden bin. Die{\" \"}\n                \u003cLink\u003eDatenschutzhinweise\u003c/Link\u003e habe ich\n                zur Kenntnis genommen\n              \u003c/Text\u003e\n            \u003c/CheckboxButton\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003eServer buchen\u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n\n      \u003cModal\n        controller={customerController}\n        offCanvas\n        size=\"m\"\n      \u003e\n        \u003cHeading\u003eOrganisation anlegen\u003c/Heading\u003e\n        \u003cContent\u003e\n          \u003cSection\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eOrganisationsname\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eVertragspartner hinzufügen\u003c/Heading\u003e\n            \u003cText\u003e\n              Lege jetzt einen Vertragspartner an. Der\n              Vertragspartner ist der Inhaber deiner\n              Organisation und der Inhaber für die Projekte\n              in ebendieser.\n            \u003c/Text\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eUSt-IdNr.\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n          \u003cSection\u003e\n            \u003cHeading\u003eZahlungsart festlegen\u003c/Heading\u003e\n            \u003cText\u003e\n              Bitte gebe hier an, ob du per Lastschrift oder\n              per Rechnung bezahlen möchtest.\n            \u003c/Text\u003e\n            \u003cRadioGroup\n              aria-label=\"Zahlungsart\"\n              defaultValue=\"invoice\"\n              variant=\"segmented\"\n            \u003e\n              \u003cRadio value=\"invoice\"\u003e\n                Zahlung per Rechnung\n              \u003c/Radio\u003e\n              \u003cRadio value=\"debit\"\u003e\n                Zahlung per Lastschrift\n              \u003c/Radio\u003e\n            \u003c/RadioGroup\u003e\n            \u003cText\u003e\n              Bitte bezahle die Rechnung innerhalb 14 Tagen.\n            \u003c/Text\u003e\n            \u003cText\u003e\n              Die E-Mail-Adresse wird vom Vertragspartner\n              übernommen, sofern kein abweichender\n              Rechnungsempfänger angegeben wurde.\n            \u003c/Text\u003e\n            \u003cCheckboxButton\n              defaultSelected\n              style={{\n                order: \"unset\",\n                width: \"fit-content\",\n              }}\n            \u003e\n              Abweichende Rechnungsdaten hinterlegen\n            \u003c/CheckboxButton\u003e\n\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\u003e\n                \u003cLabel\u003eFirma\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField\n                isRequired\n                defaultValue=\"Keine Angabe\"\n              \u003e\n                \u003cLabel\u003eAnrede\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n            \u003cColumnLayout l={[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={[1, 2]}\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003ePLZ\u003c/Label\u003e\n                \u003c/TextField\u003e\n                \u003cTextField isRequired\u003e\n                  \u003cLabel\u003eOrt\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            \u003cColumnLayout l={[1, 1]}\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eE-Mail-Adresse\u003c/Label\u003e\n              \u003c/TextField\u003e\n              \u003cTextField isRequired\u003e\n                \u003cLabel\u003eTelefonnummer\u003c/Label\u003e\n              \u003c/TextField\u003e\n            \u003c/ColumnLayout\u003e\n          \u003c/Section\u003e\n        \u003c/Content\u003e\n        \u003cActionGroup\u003e\n          \u003cAction closeOverlay\u003e\n            \u003cAction action={sleepLong}\u003e\n              \u003cButton color=\"accent\"\u003e\n                Organisation anlegen\n              \u003c/Button\u003e\n            \u003c/Action\u003e\n            \u003cButton variant=\"soft\" color=\"secondary\"\u003e\n              Abbrechen\n            \u003c/Button\u003e\n          \u003c/Action\u003e\n        \u003c/ActionGroup\u003e\n      \u003c/Modal\u003e\n    \u003c/\u003e\n  );\n};\n"])</script><script>self.__next_f.push([1,"e0:Td25,"])</script><script>self.__next_f.push([1,"import Modal, {\n  ModalTrigger,\n} from \"@mittwald/flow-react-components/Modal\";\nimport Content from \"@mittwald/flow-react-components/Content\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport ActionGroup from \"@mittwald/flow-react-components/ActionGroup\";\nimport Button from \"@mittwald/flow-react-components/Button\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Action from \"@mittwald/flow-react-components/Action\";\nimport { sleepLong } from \"@/content/03-components/actions/action/examples/lib\";\nimport { Section } from \"@mittwald/flow-react-components/Section\";\nimport {\n  Radio,\n  RadioGroup,\n} from \"@mittwald/flow-react-components/RadioGroup\";\nimport { ColumnLayout } from \"@mittwald/flow-react-components/ColumnLayout\";\nimport { TextArea } from \"@mittwald/flow-react-components/TextArea\";\n\n\u003cModalTrigger\u003e\n  \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n  \u003cModal offCanvas size=\"l\"\u003e\n    \u003cHeading\u003eTicket erstellen\u003c/Heading\u003e\n    \u003cContent\u003e\n      \u003cSection\u003e\n        \u003cHeading\u003eAuf was bezieht sich das Ticket?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Kontext\"\n          defaultValue=\"project\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"project\"\u003eEin Projekt\u003c/Radio\u003e\n          \u003cRadio value=\"server\"\u003eEin Server\u003c/Radio\u003e\n          \u003cRadio value=\"customer\"\u003eEine Organisation\u003c/Radio\u003e\n          \u003cRadio value=\"general\"\u003eAllgemein\u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Bitte wähle das passende Projekt und eine\n          passenede Kategorie, damit wir dein Ticket\n          schnellst Möglich beantworten können.\n        \u003c/Text\u003e\n\n        \u003cColumnLayout l={[1, 1]}\u003e\n          \u003cTextField defaultValue=\"Mein Projekt\" isRequired\u003e\n            \u003cLabel\u003eBetroffenes Projekt\u003c/Label\u003e\n          \u003c/TextField\u003e\n          \u003cTextField defaultValue=\"Allgemein\" isRequired\u003e\n            \u003cLabel\u003eKategorie wählen\u003c/Label\u003e\n          \u003c/TextField\u003e\n        \u003c/ColumnLayout\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWer soll Zugriff haben?\u003c/Heading\u003e\n        \u003cRadioGroup\n          aria-label=\"Zugriff\"\n          defaultValue=\"all\"\n          variant=\"segmented\"\n        \u003e\n          \u003cRadio value=\"all\"\u003eProjektmitglieder\u003c/Radio\u003e\n          \u003cRadio value=\"privat\"\u003e\n            Privat (Nur für mich)\n          \u003c/Radio\u003e\n        \u003c/RadioGroup\u003e\n\n        \u003cText\u003e\n          Alle \u003cb\u003eProjektadministratoren\u003c/b\u003e und alle\n          \u003cb\u003e Projektentwickler\u003c/b\u003e sollen mitlesen können.\n          Die Beteiligten können diese Anfrage in ihrem\n          Supportbereich einsehen. Benachrichtigungen\n          bekommen sie erst, wenn sie sich an der\n          Konversation beteiligen.\n        \u003c/Text\u003e\n      \u003c/Section\u003e\n\n      \u003cSection\u003e\n        \u003cHeading\u003eWie können wir dir helfen?\u003c/Heading\u003e\n        \u003cTextField isRequired\u003e\n          \u003cLabel\u003eBetreff\u003c/Label\u003e\n        \u003c/TextField\u003e\n        \u003cTextArea isRequired\u003e\n          \u003cLabel\u003eNachricht\u003c/Label\u003e\n        \u003c/TextArea\u003e\n      \u003c/Section\u003e\n    \u003c/Content\u003e\n    \u003cActionGroup\u003e\n      \u003cAction closeOverlay\u003e\n        \u003cAction action={sleepLong}\u003e\n          \u003cButton color=\"accent\"\u003eTicket erstellen\u003c/Button\u003e\n        \u003c/Action\u003e\n        \u003cButton variant=\"soft\" color=\"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,"db:{\"appInstallation\":\"$dc\",\"default\":\"$dd\",\"offCanvas\":\"$de\",\"order\":\"$df\",\"ticket\":\"$e0\"}\ne1:[\"03-components\",\"overlays\",\"modal\"]\ne3:{\"component\":\"OffCanvas\",\"description\":\"Das OffCanvas dient dazu Inhalte in einem seitlich angeordneten Overlay anzuzeigen. Es kann beispielsweise für mobile Navigation verwendet werden\"}\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\"}\ne6: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-labe"])</script><script>self.__next_f.push([1,"l=\"Main menu\"\u003e\n        \u003cLink\u003e\n          \u003cIconCustomer /\u003e\n          \u003cText\u003eCustomer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink aria-current=\"page\"\u003e\n          \u003cIconServer /\u003e\n          \u003cText\u003eServer\u003c/Text\u003e\n        \u003c/Link\u003e\n        \u003cLink\u003e\n          \u003cIconProject /\u003e\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;\ne5:{\"default\":\"$e6\"}\ne7:[\"03-components\",\"overlays\",\"off-canvas\"]\ne9:{\"component\":\"Tooltip\",\"description\":\"Ein Tooltip zeigt dem Benutzer zusätzliche Informationen beim hovern an.\"}\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\"}\neb:{\"default\":\"import Tooltip, {\\n  TooltipTrigger,\\n} from \\\"@mittwald/flow-react-components/Tooltip\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\nimport { IconCopy } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cTooltipTrigger\u003e\\n  \u003cButton aria-label=\\\"Speichern\\\"\u003e\\n    \u003cIconCopy /\u003e\\n  \u003c/Button\u003e\\n  \u003cTooltip\u003eSpeichern\u003c/Tooltip\u003e\\n\u003c/TooltipTrigger\u003e;\\n\"}\nec:[\"03-components\",\"overlays\",\"tooltip\"]\nee:{\"component\":\"CounterBadge\",\"description\":\"Das CounterBadge wird verwendet, um V"])</script><script>self.__next_f.push([1,"eränderungen an einem Element, wie beispielsweise die Anzahl neuer Notifications, anzuzeigen.\"}\nef:{}\ned:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$ee\",\"scope\":\"$ef\"}\nf0:{\"default\":\"import 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\"}\nf1:[\"03-components\",\"status\",\"counter-label\"]\nf3:{\"component\":\"InlineAlert\",\"description\":\"Der InlineAlert zeigt relevante Hinweise innerhalb des Contents an.\"}\nf4:{}\nf2:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\ncons"])</script><script>self.__next_f.push([1,"t {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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:T513,import InlineAlert from \"@mittwald/flow-react-components/InlineAlert\";\nimport Heading from \"@mittwald/flow-react-components/Heading\";\nimport Content from \"@mittwald/flow-react-components/Content\";\n\n\u003cRow\u003e\n  \u003cInlineAlert status=\"info\"\u003e\n    \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Da deine Domain gelöscht wurde, wurde diese\n      E-Mail-Adresse archiviert. Um E-Mails empfangen und\n      senden zu können musst du die Adresse wieder\n      umbenennen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"warning\"\u003e\n    \u003cHeading\u003eDein Speicher ist fast voll\u003c/Heading\u003e\n    \u003cContent\u003e\n      Dein Speicher ist zu über 80% belegt. Wir empfehlen\n      dir deinen Speicherplatz zu erweitern, um Problemen\n      vorzubeugen.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\n  \u003cInlineAlert status=\"danger\"\u003e\n    \u003cHeading\u003e\n      Es konnte kein SSL-Zertifikat ausgestellt werden\n    \u003c/Heading\u003e\n    \u003cContent\u003e\n      Für diese Domain konnte kein SSL-Zertifikat\n      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 Ap"])</script><script>self.__next_f.push([1,"p wurde aktualisiert\u003c/Heading\u003e\n    \u003cContent\u003e\n      Deine App wurde erfolgreich auf die neueste Version\n      aktualisiert.\n    \u003c/Content\u003e\n  \u003c/InlineAlert\u003e\n\u003c/Row\u003e;\nf5:{\"default\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n\u003c/InlineAlert\u003e;\\n\",\"status\":\"$f6\",\"with-content\":\"import InlineAlert from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Button from \\\"@mittwald/flow-react-components/Button\\\";\\n\\n\u003cInlineAlert\u003e\\n  \u003cHeading\u003eE-Mail-Adresse wurde archiviert\u003c/Heading\u003e\\n  \u003cContent\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n    \u003cButton\u003eE-Mail-Adresse anpassen\u003c/Button\u003e\\n  \u003c/Content\u003e\\n\u003c/InlineAlert\u003e;\\n\"}\nf7:[\"03-components\",\"status\",\"inline-alert\"]\nf9:{\"component\":\"LoadingSpinner\",\"description\":\"Der Loading Spinner zeigt an, dass sich ein Element oder eine Seite im Ladezustand befindet.\"}\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 \\\" + "])</script><script>self.__next_f.push([1,"(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 LoadingSpinner from \\\"@mittwald/flow-react-components/LoadingSpinner\\\";\\n\\n\u003cLoadingSpinner /\u003e;\\n\"}\nfc:[\"03-components\",\"status\",\"loading-spinner\"]\nfe:{\"component\":\"ProgressBar\",\"description\":\"Die Progressbar zeigt an wie weit ein Vorgang fortgeschritten ist.\"}\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 ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"maxValue\":\"import ProgressBar from \\\"@mittwald/flow-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 \\\"@mittwa"])</script><script>self.__next_f.push([1,"ld/flow-react-components/ProgressBar\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cProgressBar size=\\\"s\\\" value={50}\u003e\\n  \u003cLabel\u003eSpeicher\u003c/Label\u003e\\n\u003c/ProgressBar\u003e;\\n\",\"status\":\"import ProgressBar from \\\"@mittwald/flow-react-components/ProgressBar\\\";\\n\\n\u003cRow\u003e\\n  \u003cProgressBar value={50} status=\\\"info\\\"\u003e\\n    Info\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={50} status=\\\"success\\\"\u003e\\n    Success\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={70} status=\\\"warning\\\"\u003e\\n    Warning\\n  \u003c/ProgressBar\u003e\\n  \u003cProgressBar value={90} status=\\\"danger\\\"\u003e\\n    Danger\\n  \u003c/ProgressBar\u003e\\n\u003c/Row\u003e;\\n\"}\n101:[\"03-components\",\"status\",\"progress-bar\"]\n103:{\"component\":\"StatusBadge\",\"description\":\"Der StatusBadge zeigt Informationen zum Zustand eines Elements.\"}\n104:{}\n102:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\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\"}\n105:{\"default\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cStatusBadge\u003eArchiviert\u003c/StatusBadge\u003e;\\n\",\"status\":\"import StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusBadge status=\\\"info\\\"\u003eArchiviert\u003c/StatusBadge\u003e\\n  \u003cStatusBadge st"])</script><script>self.__next_f.push([1,"atus=\\\"success\\\"\u003e\\n    Update erfolgreich\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"warning\\\"\u003e\\n    Speicher fast voll\\n  \u003c/StatusBadge\u003e\\n  \u003cStatusBadge status=\\\"danger\\\"\u003eSSL fehlt\u003c/StatusBadge\u003e\\n\u003c/Row\u003e;\\n\"}\n106:[\"03-components\",\"status\",\"status-badge\"]\n108:{\"component\":\"StatusIcon\",\"description\":\"Das StatusIcon dient zur Veranschaulichung eines Status, beispielsweise in einem StatusBadge oder InlineAlert\"}\n109:{}\n107:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$108\",\"scope\":\"$109\"}\n10a:{\"default\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cStatusIcon /\u003e;\\n\",\"status\":\"import StatusIcon from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cRow\u003e\\n  \u003cStatusIcon status=\\\"info\\\" /\u003e\\n  \u003cStatusIcon status=\\\"success\\\" /\u003e\\n  \u003cStatusIcon status=\\\"warning\\\" /\u003e\\n  \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n\u003c/Row\u003e;\\n\"}\n10b:[\"03-components\",\"status\",\"status-icon\"]\n10d:{\"component\":\"Accordion\",\"description\":\"Das Accordion dient dazu Content-Bereiche ein- und auszublenden.\"}\n10e:{}\n10c:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arg"])</script><script>self.__next_f.push([1,"uments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$10d\",\"scope\":\"$10e\"}\n10f:{\"default-expanded\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion defaultExpanded\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cHeading\u003eAccordion Titel\u003c/Heading\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\",\"label\":\"import Accordion from \\\"@mittwald/flow-react-components/Accordion\\\";\\nimport Content from \\\"@mittwald/flow-react-components/Content\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cAccordion\u003e\\n  \u003cLabel\u003eAccordion Titel\u003c/Label\u003e\\n  \u003cContent\u003eInhalt des Accordions\u003c/Content\u003e\\n\u003c/Accordion\u003e;\\n\"}\n110:[\"03-components\",\"structure\",\"accordion\"]\n112:{\"component\":\"ColumnLayout\",\"description\":\"Mit dem ColumnLayout kann Inhalt in Spalten unterteilt werden.\"}\n113:{}\n111:{\"compiledSource\""])</script><script>self.__next_f.push([1,":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {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\":\"$112\",\"scope\":\"$113\"}\n114:{\"custom-values\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout m={[2, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"default\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eStraße\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eHausnummer\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"main\":\"import ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport TextField from \\\"@mittwald/flow-react-components/TextField\\\";\\nimport La"])</script><script>self.__next_f.push([1,"bel from \\\"@mittwald/flow-react-components/Label\\\";\\n\\n\u003cColumnLayout s={[1, 1]}\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eVorname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n  \u003cTextField\u003e\\n    \u003cLabel\u003eNachname\u003c/Label\u003e\\n  \u003c/TextField\u003e\\n\u003c/ColumnLayout\u003e;\\n\"}\n115:[\"03-components\",\"structure\",\"column-layout\"]\n117:{\"component\":\"LayoutCard\",\"description\":\"Eine LayoutCard ist ein Struktur-Element, das mit beliebigem Inhalt gefüllt werden kann\"}\n118:{}\n116:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props);\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$117\",\"scope\":\"$118\"}\n119:{\"default\":\"import LayoutCard from \\\"@mittwald/flow-react-components/LayoutCard\\\";\\n\\n\u003cLayoutCard\u003eInhalt der Layout Card\u003c/LayoutCard\u003e;\\n\"}\n11a:[\"03-components\",\"structure\",\"layout-card\"]\n11c:{\"component\":\"List\",\"description\":\"Die List-Component stellt eine Liste von Elementen mit verschiedenen Informationen dar.\"}\n11d:{}\n11b:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEd"])</script><script>self.__next_f.push([1,"itor\\\", 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\":\"$11c\",\"scope\":\"$11d\"}\n11f: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/"])</script><script>self.__next_f.push([1,"Text\u003e\n        ) : (\n          \u003cStatusBadge status=\"warning\"\u003e\n            Nicht verifiziert\n          \u003c/StatusBadge\u003e\n        )}\n        \u003cContextMenu\u003e\n          \u003cMenuItem\u003eDetails anzeigen\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eLöschen\u003c/MenuItem\u003e\n        \u003c/ContextMenu\u003e\n      \u003c/ListItem\u003e\n    )}\n  \u003c/ListItemView\u003e\n\u003c/List\u003e;\n120: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;\n121: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\";\nimpo"])</script><script>self.__next_f.push([1,"rt Text from \"@mittwald/flow-react-components/Text\";\nimport ContextMenu, {\n  MenuItem,\n} from \"@mittwald/flow-react-components/ContextMenu\";\nimport {\n  IconDomain,\n  IconSubdomain,\n} from \"@mittwald/flow-react-components/Icons\";\nimport StatusBadge from \"@mittwald/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;\n11e:{\"default\":\"$11f\",\"main\":\"$120\",\"withLink\":\"$121\"}\n122:[\"03-components\",\"structure\",\"list\"]\n124:{\"component\":\"Section\",\"description\":\"Die Section dient der Unterteilung von Inhalten in verschiedene Abschnitte\"}\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) {\\"])</script><script>self.__next_f.push([1,"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\"}\n127:T42a,import Heading from \"@mittwald/flow-react-components/Heading\";\nimport Text from \"@mittwald/flow-react-components/Text\";\nimport Link from \"@mittwald/flow-react-components/Link\";\nimport Section from \"@mittwald/flow-react-components/Section\";\nimport TextField from \"@mittwald/flow-react-components/TextField\";\nimport Label from \"@mittwald/flow-react-components/Label\";\nimport { IconMember } from \"@mittwald/flow-react-components/Icons\";\n\n\u003c\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003e\n      \u003cIconMember /\u003e\n      Persönliche Informationen\n    \u003c/Heading\u003e\n    \u003cTextField isRequired defaultValue=\"John\"\u003e\n      \u003cLabel\u003eVorname\u003c/Label\u003e\n    \u003c/TextField\u003e\n    \u003cTextField isRequired defaultValue=\"Doe\"\u003e\n      \u003cLabel\u003eNachname\u003c/Label\u003e\n    \u003c/TextField\u003e\n  \u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\n    \u003cText\u003e\n      Kommende Releases, neue Features und Tipps rund um\n      dein Hosting – wir bringen dir das Wichtigste in dein\n      Postfach. Abonniere unseren Newsletter und bleib auf\n      dem Laufenden.\n    \u003c/Text\u003e\n    \u003cLink href=\"#\"\u003eNewsletter abonnieren\u003c/Link\u003e\n  \u003c/Section\u003e\n\u003c/\u003e;\n126:{\"default\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Link from \\\"@mittwald/flow-react-components/Link\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – 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\":\"$127\",\"status-badge\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Sect"])</script><script>self.__next_f.push([1,"ion from \\\"@mittwald/flow-react-components/Section\\\";\\nimport StatusBadge from \\\"@mittwald/flow-react-components/StatusBadge\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cStatusBadge\u003eSubscribed\u003c/StatusBadge\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\",\"switch\":\"import Heading from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport Header from \\\"@mittwald/flow-react-components/Header\\\";\\nimport Text from \\\"@mittwald/flow-react-components/Text\\\";\\nimport Section from \\\"@mittwald/flow-react-components/Section\\\";\\nimport Switch from \\\"@mittwald/flow-react-components/Switch\\\";\\n\\n\u003cSection\u003e\\n  \u003cHeader\u003e\\n    \u003cHeading\u003eNewsletter\u003c/Heading\u003e\\n    \u003cSwitch\u003eAbonnement\u003c/Switch\u003e\\n  \u003c/Header\u003e\\n  \u003cText\u003e\\n    Kommende Releases, neue Features und Tipps rund um dein\\n    Hosting – wir bringen dir das Wichtigste in dein\\n    Postfach. Abonniere unseren Newsletter und bleib auf dem\\n    Laufenden.\\n  \u003c/Text\u003e\\n\u003c/Section\u003e;\\n\"}\n128:[\"03-components\",\"structure\",\"section\"]\n12a:{\"component\":\"Separator\",\"description\":\"A Separator is a horizontal line that separates content.\"}\n12b:{}\n129:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  const {LiveCodeEditor} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  if (!LiveCodeEditor) _missingMdxReference(\\\"LiveCodeEditor\\\", true);\\n  return _jsx(LiveCodeEditor, {\\n    editorDisabled: true\\n  });\\n}\\nfunction MDXContent(props = {}) {\\n  const {wrapper: MDXLayout} = {\\n    ..._provideComponents(),\\n    ...props.components\\n  };\\n  return MDXLayout ? _jsx(MDXLayout, {\\n    ...props,\\n    children: _jsx(_createMdxContent, {\\n      ...props\\n    })\\n  }) : _createMdxContent(props"])</script><script>self.__next_f.push([1,");\\n}\\nreturn {\\n  default: MDXContent\\n};\\nfunction _missingMdxReference(id, component) {\\n  throw new Error(\\\"Expected \\\" + (component ? \\\"component\\\" : \\\"object\\\") + \\\" `\\\" + id + \\\"` to be defined: you likely forgot to import, pass, or provide it.\\\");\\n}\\n\",\"frontmatter\":\"$12a\",\"scope\":\"$12b\"}\n12c:{\"default\":\"import Separator from \\\"@mittwald/flow-react-components/Separator\\\";\\n\\n\u003cSeparator /\u003e;\\n\"}\n12d:[\"03-components\",\"structure\",\"separator\"]\n12f:{\"component\":\"Table\",\"description\":\"Die Table Komponente stellt eine einfache Tabelle bereit, um Listen von Informationen anzuzeigen\"}\n130:{}\n12e:{\"compiledSource\":\"\\\"use strict\\\";\\nconst {jsx: _jsx} = arguments[0];\\nconst {useMDXComponents: _provideComponents} = arguments[0];\\nfunction _createMdxContent(props) {\\n  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\":\"$12f\",\"scope\":\"$130\"}\n132: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  \u003cTableBod"])</script><script>self.__next_f.push([1,"y\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;\n131:{\"default\":\"$132\"}\n133:[\"03-components\",\"structure\",\"table\"]\n136:{\"mdxSource\":\"$2b\",\"examples\":\"$2f\",\"slugs\":\"$30\",\"filename\":\"01-get-started/installation/index.mdx\"}\n137:{\"mdxSource\":\"$31\",\"examples\":\"$35\",\"slugs\":\"$36\",\"filename\":\"01-get-started/stylesheet/index.mdx\"}\n138:{\"mdxSource\":\"$37\",\"examples\":\"$3b\",\"slugs\":\"$3c\",\"filename\":\"02-foundations/content-guidelines/fehlermeldungen/index.mdx\"}\n139:{\"mdxSource\":\"$3d\",\"examples\":\"$40\",\"slugs\":\"$41\",\"filename\":\"03-components/actions/action-group/index.mdx\"}\n13a:{\"mdxSource\":\"$42\",\"examples\":\"$45\",\"slugs\":\"$47\",\"filename\":\"03-components/actions/action/index.mdx\"}\n13b:{\"mdxSource\":\"$48\",\"examples\":\"$4b\",\"slugs\":\"$4c\",\"filename\":\"03-components/actions/button/index.mdx\"}\n13c:{\"mdxSource\":\"$4d\",\"examples\":\"$50\",\"slugs\":\"$51\",\"filename\":\"03-components/actions/context-menu/index.mdx\"}\n13d:{\"mdxSource\":\"$52\",\"examples\":\"$55\",\"slugs\":\"$56\",\"filename\":\"03-components/actions/copy-button/index.mdx\"}\n13e:{\"mdxSource\":\"$57\",\"examples\":\"$5a\",\"slugs\":\"$5b\",\"filename\":\"03-components/content/avatar/index.mdx\"}\n13f:{\"mdxSource\":\"$5c\",\"examples\":\"$5f\",\"slugs\":\"$60\",\"filename\":\"03-components/content/heading/index.mdx\"}\n140:{\"mdxSource\":\"$61\",\"examples\":\"$64\",\"slugs\":\"$67\",\"filename\":\"03-components/content/icon/inde"])</script><script>self.__next_f.push([1,"x.mdx\"}\n141:{\"mdxSource\":\"$68\",\"examples\":\"$6b\",\"slugs\":\"$6c\",\"filename\":\"03-components/content/illustrated-message/index.mdx\"}\n142:{\"mdxSource\":\"$6d\",\"examples\":\"$70\",\"slugs\":\"$71\",\"filename\":\"03-components/content/image/index.mdx\"}\n143:{\"mdxSource\":\"$72\",\"examples\":\"$75\",\"slugs\":\"$76\",\"filename\":\"03-components/content/inline-code/index.mdx\"}\n144:{\"mdxSource\":\"$77\",\"examples\":\"$7a\",\"slugs\":\"$7b\",\"filename\":\"03-components/content/label/index.mdx\"}\n145:{\"mdxSource\":\"$7c\",\"examples\":\"$7f\",\"slugs\":\"$80\",\"filename\":\"03-components/content/labeled-value/index.mdx\"}\n146:{\"mdxSource\":\"$81\",\"examples\":\"$84\",\"slugs\":\"$85\",\"filename\":\"03-components/content/skeleton/index.mdx\"}\n147:{\"mdxSource\":\"$86\",\"examples\":\"$89\",\"slugs\":\"$8a\",\"filename\":\"03-components/content/text/index.mdx\"}\n148:{\"mdxSource\":\"$8b\",\"examples\":\"$8e\",\"slugs\":\"$8f\",\"filename\":\"03-components/form-controls/checkbox-button/index.mdx\"}\n149:{\"mdxSource\":\"$90\",\"examples\":\"$93\",\"slugs\":\"$94\",\"filename\":\"03-components/form-controls/checkbox-group/index.mdx\"}\n14a:{\"mdxSource\":\"$95\",\"examples\":\"$98\",\"slugs\":\"$99\",\"filename\":\"03-components/form-controls/checkbox/index.mdx\"}\n14b:{\"mdxSource\":\"$9a\",\"examples\":\"$9d\",\"slugs\":\"$9e\",\"filename\":\"03-components/form-controls/number-field/index.mdx\"}\n14c:{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"}\n14d:{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/select/index.mdx\"}\n14e:{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/slider/index.mdx\"}\n14f:{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/switch/index.mdx\"}\n150:{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"}\n151:{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"}\n152:{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/navigation/breadcrumb"])</script><script>self.__next_f.push([1,"/index.mdx\"}\n153:{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c7\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"}\n154:{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/link/index.mdx\"}\n155:{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/navigation/index.mdx\"}\n156:{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/tabs/index.mdx\"}\n157:{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$e1\",\"filename\":\"03-components/overlays/modal/index.mdx\"}\n158:{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"}\n159:{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"}\n15a:{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"03-components/status/counter-label/index.mdx\"}\n15b:{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/status/inline-alert/index.mdx\"}\n15c:{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"}\n15d:{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/progress-bar/index.mdx\"}\n15e:{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$106\",\"filename\":\"03-components/status/status-badge/index.mdx\"}\n15f:{\"mdxSource\":\"$107\",\"examples\":\"$10a\",\"slugs\":\"$10b\",\"filename\":\"03-components/status/status-icon/index.mdx\"}\n160:{\"mdxSource\":\"$10c\",\"examples\":\"$10f\",\"slugs\":\"$110\",\"filename\":\"03-components/structure/accordion/index.mdx\"}\n161:{\"mdxSource\":\"$111\",\"examples\":\"$114\",\"slugs\":\"$115\",\"filename\":\"03-components/structure/column-layout/index.mdx\"}\n162:{\"mdxSource\":\"$116\",\"examples\":\"$119\",\"slugs\":\"$11a\",\"filename\":\"03-components/structure/layout-card/index.mdx\"}\n163:{\"mdxSource\":\"$11b\",\"examples\":\"$11e\",\"slugs\":\"$122\",\"filename\":\"03-components/structure/list/index.mdx\"}\n164:{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$128\",\"filename\":\"03-components/structure/section/index.mdx\"}"])</script><script>self.__next_f.push([1,"\n165:{\"mdxSource\":\"$129\",\"examples\":\"$12c\",\"slugs\":\"$12d\",\"filename\":\"03-components/structure/separator/index.mdx\"}\n166:{\"mdxSource\":\"$12e\",\"examples\":\"$131\",\"slugs\":\"$133\",\"filename\":\"03-components/structure/table/index.mdx\"}\n135:[\"$136\",\"$137\",\"$138\",\"$139\",\"$13a\",\"$13b\",\"$13c\",\"$13d\",\"$13e\",\"$13f\",\"$140\",\"$141\",\"$142\",\"$143\",\"$144\",\"$145\",\"$146\",\"$147\",\"$148\",\"$149\",\"$14a\",\"$14b\",\"$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\"]\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"flow layout_body__oiEIT\",\"children\":[\"$\",\"$La\",null,{\"children\":[[\"$\",\"header\",null,{\"className\":\"layout_header__ttTk7\",\"children\":[[\"$\",\"$Lb\",null,{\"size\":\"l\",\"className\":\"layout_logo__PcxmI\"}],[\"$\",\"$Lc\",null,{\"level\":1,\"className\":\"$undefined\",\"children\":\"Flow\"}],[\"$\",\"$Ld\",null,{\"className\":\"layout_betaBadge__Rtyuk\",\"status\":\"warning\",\"children\":\"beta\"}],[\"$\",\"$Le\",null,{\"className\":\"layout_headerNavigation__SNRbw\",\"docs\":[{\"mdxSource\":{\"compiledSource\":\"$f\",\"frontmatter\":{\"description\":\"Willkommen in der Flow Dokumentation!\"},\"scope\":{}},\"examples\":{},\"slugs\":[\"01-get-started\",\"installation\"],\"filename\":\"01-get-started/installation/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$10\",\"frontmatter\":{},\"scope\":{}},\"examples\":{\"composition\":\"import ExampleSvg from \\\"@/content/01-get-started/stylesheet/examples/components/ExampleSvg\\\";\\n\\n\u003caside className=\\\"flow--inline-alert flow--inline-alert--info\\\"\u003e\\n  \u003cExampleSvg className=\\\"flow--icon flow--inline-alert--status-icon\\\" /\u003e\\n  \u003ch3 className=\\\"flow--heading flow--inline-alert--heading\\\"\u003e\\n    E-Mail Adresse wurde archiviert\\n  \u003c/h3\u003e\\n  \u003cdiv className=\\\"flow--inline-alert--content\\\"\u003e\\n    Da deine Domain gelöscht wurde, wurde diese\\n    E-Mail-Adresse archiviert. Um E-Mails empfangen und\\n    senden zu können musst du die Adresse wieder umbenennen.\\n  \u003c/div\u003e\\n\u003c/aside\u003e;\\n\",\"multiple-variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary flow--button--size-s\\\"\u003e\\n  Small Primary Button\\n\u003c/button\u003e;\\n\",\"variants\":\"\u003cbutton className=\\\"flow--button flow--button--primary\\\"\u003e\\n  Primary Button\\n\u003c/button\u003e;\\n\"},\"slugs\":[\"01-get-started\",\"stylesheet\"],\"filename\":\"01-get-started/stylesheet/index.mdx\"},{\"mdxSource\":{\"compiledSource\":\"$11\",\"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\":\"$12\",\"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\":\"$13\",\"functional\":\"$14\",\"sizes\":\"import { IconHome } from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cRow\u003e\\n  \u003cIconHome size=\\\"s\\\" /\u003e\\n  \u003cIconHome size=\\\"m\\\" /\u003e\\n  \u003cIconHome size=\\\"l\\\" /\u003e\\n\u003c/Row\u003e;\\n\",\"states\":\"import LabeledValue from \\\"@mittwald/flow-react-components/LabeledValue\\\";\\nimport ColumnLayout from \\\"@mittwald/flow-react-components/ColumnLayout\\\";\\nimport Label from \\\"@mittwald/flow-react-components/Label\\\";\\nimport {\\n  IconDanger,\\n  IconFailed,\\n  IconInfo,\\n  IconPending,\\n  IconSucceeded,\\n  IconSuccess,\\n  IconWarning,\\n} from \\\"@mittwald/flow-react-components/Icons\\\";\\n\\n\u003cColumnLayout l={[1, 1, 1, 1, 1]} m={[1, 1, 1]} s={[1, 1]}\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eDanger\u003c/Label\u003e\\n    \u003cIconDanger /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eFailed\u003c/Label\u003e\\n    \u003cIconFailed /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eInfo\u003c/Label\u003e\\n    \u003cIconInfo /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003ePending\u003c/Label\u003e\\n    \u003cIconPending /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSucceeded\u003c/Label\u003e\\n    \u003cIconSucceeded /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eSuccess\u003c/Label\u003e\\n    \u003cIconSuccess /\u003e\\n  \u003c/LabeledValue\u003e\\n  \u003cLabeledValue\u003e\\n    \u003cLabel\u003eWarning\u003c/Label\u003e\\n    \u003cIconWarning /\u003e\\n  \u003c/LabeledValue\u003e\\n\u003c/ColumnLayout\u003e;\\n\",\"svg-string\":\"import Icon from \\\"@mittwald/flow-react-components/Icon\\\";\\n\\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\":\"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\":\"$15\",\"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\":\"$16\",\"default\":\"import Tabs, {\\n  Tab,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003eSpeicherplatz\u003c/TabTitle\u003e\\n    Speicherplatz Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\",\"status\":\"import {\\n  Tab,\\n  Tabs,\\n  TabTitle,\\n} from \\\"@mittwald/flow-react-components/Tabs\\\";\\nimport { InlineAlert } from \\\"@mittwald/flow-react-components/InlineAlert\\\";\\nimport { Heading } from \\\"@mittwald/flow-react-components/Heading\\\";\\nimport { StatusIcon } from \\\"@mittwald/flow-react-components/StatusIcon\\\";\\n\\n\u003cTabs\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eAllgemein\u003c/TabTitle\u003e\\n    Allgemeiner Inhalt\\n  \u003c/Tab\u003e\\n  \u003cTab id=\\\"storage\\\"\u003e\\n    \u003cTabTitle\u003e\\n      Speicherplatz\\n      \u003cStatusIcon status=\\\"danger\\\" /\u003e\\n    \u003c/TabTitle\u003e\\n    \u003cInlineAlert status=\\\"danger\\\"\u003e\\n      \u003cHeading\u003eDein Speicherplatz ist voll\u003c/Heading\u003e\\n    \u003c/InlineAlert\u003e\\n  \u003c/Tab\u003e\\n  \u003cTab\u003e\\n    \u003cTabTitle\u003eSpamschutz\u003c/TabTitle\u003e\\n    Spamschutz Inhalt\\n  \u003c/Tab\u003e\\n\u003c/Tabs\u003e;\\n\"},\"slugs\":[\"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\":\"Modal\",\"description\":\"Benutze das Modal um Inhalte in einem Overlay über der eigentlichen Oberfläche anzuzeigen.\"},\"scope\":{}},\"examples\":{\"appInstallation\":\"$17\",\"default\":\"$18\",\"offCanvas\":\"$19\",\"order\":\"$1a\",\"ticket\":\"$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\":\"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\":[[\"$\",\"$Le\",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/number-field/index.mdx\"},{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c7\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$e1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$106\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$107\",\"examples\":\"$10a\",\"slugs\":\"$10b\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$10c\",\"examples\":\"$10f\",\"slugs\":\"$110\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$111\",\"examples\":\"$114\",\"slugs\":\"$115\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$116\",\"examples\":\"$119\",\"slugs\":\"$11a\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11b\",\"examples\":\"$11e\",\"slugs\":\"$122\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$128\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$129\",\"examples\":\"$12c\",\"slugs\":\"$12d\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$12e\",\"examples\":\"$131\",\"slugs\":\"$133\",\"filename\":\"03-components/structure/table/index.mdx\"}]}],[\"$\",\"$L134\",null,{\"docs\":\"$135\"}]]}]]}]]}]}]}]]}],[\"$\",\"div\",null,{\"className\":\"layout_center__e1uqg\",\"children\":[[\"$\",\"$L167\",null,{\"className\":\"layout_mainNavigation__zVTd_\",\"children\":[\"$\",\"$L134\",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/number-field/index.mdx\"},{\"mdxSource\":\"$9f\",\"examples\":\"$a2\",\"slugs\":\"$a3\",\"filename\":\"03-components/form-controls/radio-group/index.mdx\"},{\"mdxSource\":\"$a4\",\"examples\":\"$a7\",\"slugs\":\"$a8\",\"filename\":\"03-components/form-controls/select/index.mdx\"},{\"mdxSource\":\"$a9\",\"examples\":\"$ac\",\"slugs\":\"$ad\",\"filename\":\"03-components/form-controls/slider/index.mdx\"},{\"mdxSource\":\"$ae\",\"examples\":\"$b1\",\"slugs\":\"$b2\",\"filename\":\"03-components/form-controls/switch/index.mdx\"},{\"mdxSource\":\"$b3\",\"examples\":\"$b6\",\"slugs\":\"$b7\",\"filename\":\"03-components/form-controls/text-area/index.mdx\"},{\"mdxSource\":\"$b8\",\"examples\":\"$bb\",\"slugs\":\"$bc\",\"filename\":\"03-components/form-controls/text-field/index.mdx\"},{\"mdxSource\":\"$bd\",\"examples\":\"$c0\",\"slugs\":\"$c1\",\"filename\":\"03-components/navigation/breadcrumb/index.mdx\"},{\"mdxSource\":\"$c2\",\"examples\":\"$c5\",\"slugs\":\"$c7\",\"filename\":\"03-components/navigation/header-navigation/index.mdx\"},{\"mdxSource\":\"$c8\",\"examples\":\"$cb\",\"slugs\":\"$cc\",\"filename\":\"03-components/navigation/link/index.mdx\"},{\"mdxSource\":\"$cd\",\"examples\":\"$d0\",\"slugs\":\"$d1\",\"filename\":\"03-components/navigation/navigation/index.mdx\"},{\"mdxSource\":\"$d2\",\"examples\":\"$d5\",\"slugs\":\"$d7\",\"filename\":\"03-components/navigation/tabs/index.mdx\"},{\"mdxSource\":\"$d8\",\"examples\":\"$db\",\"slugs\":\"$e1\",\"filename\":\"03-components/overlays/modal/index.mdx\"},{\"mdxSource\":\"$e2\",\"examples\":\"$e5\",\"slugs\":\"$e7\",\"filename\":\"03-components/overlays/off-canvas/index.mdx\"},{\"mdxSource\":\"$e8\",\"examples\":\"$eb\",\"slugs\":\"$ec\",\"filename\":\"03-components/overlays/tooltip/index.mdx\"},{\"mdxSource\":\"$ed\",\"examples\":\"$f0\",\"slugs\":\"$f1\",\"filename\":\"03-components/status/counter-label/index.mdx\"},{\"mdxSource\":\"$f2\",\"examples\":\"$f5\",\"slugs\":\"$f7\",\"filename\":\"03-components/status/inline-alert/index.mdx\"},{\"mdxSource\":\"$f8\",\"examples\":\"$fb\",\"slugs\":\"$fc\",\"filename\":\"03-components/status/loading-spinner/index.mdx\"},{\"mdxSource\":\"$fd\",\"examples\":\"$100\",\"slugs\":\"$101\",\"filename\":\"03-components/status/progress-bar/index.mdx\"},{\"mdxSource\":\"$102\",\"examples\":\"$105\",\"slugs\":\"$106\",\"filename\":\"03-components/status/status-badge/index.mdx\"},{\"mdxSource\":\"$107\",\"examples\":\"$10a\",\"slugs\":\"$10b\",\"filename\":\"03-components/status/status-icon/index.mdx\"},{\"mdxSource\":\"$10c\",\"examples\":\"$10f\",\"slugs\":\"$110\",\"filename\":\"03-components/structure/accordion/index.mdx\"},{\"mdxSource\":\"$111\",\"examples\":\"$114\",\"slugs\":\"$115\",\"filename\":\"03-components/structure/column-layout/index.mdx\"},{\"mdxSource\":\"$116\",\"examples\":\"$119\",\"slugs\":\"$11a\",\"filename\":\"03-components/structure/layout-card/index.mdx\"},{\"mdxSource\":\"$11b\",\"examples\":\"$11e\",\"slugs\":\"$122\",\"filename\":\"03-components/structure/list/index.mdx\"},{\"mdxSource\":\"$123\",\"examples\":\"$126\",\"slugs\":\"$128\",\"filename\":\"03-components/structure/section/index.mdx\"},{\"mdxSource\":\"$129\",\"examples\":\"$12c\",\"slugs\":\"$12d\",\"filename\":\"03-components/structure/separator/index.mdx\"},{\"mdxSource\":\"$12e\",\"examples\":\"$131\",\"slugs\":\"$133\",\"filename\":\"03-components/structure/table/index.mdx\"}]}]}],[\"$\",\"main\",null,{\"className\":\"layout_main__30FUz\",\"children\":[\"$\",\"$L168\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L169\",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/add-modal-examples/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n4:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/docs/add-modal-examples/index.txt b/docs/add-modal-examples/index.txt
index 92895e58c2..349ecbef7f 100644
--- a/docs/add-modal-examples/index.txt
+++ b/docs/add-modal-examples/index.txt
@@ -1,4 +1,4 @@
-0:["x2v9ngCdS7SFXG00l-_Lw",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$L3",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/8b4ac0b39bf237ba.css","precedence":"next","crossOrigin":"$undefined"}]],"$L4"]]]]
+0:["XsuBmIygOi7O3jsQfHzjm",[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$L3",null],null],[[["$","link","0",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_next/static/css/cfb88d9daade875e.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/flow-previews/docs/add-modal-examples/_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","975","static/chunks/975-42db6d55523e5280.js","460","static/chunks/460-420dcc5c1c246801.js","185","static/chunks/app/layout-ac87403527dc6914.js"],"LinkProvider"]
 6:I[41451,["737","static/chunks/ce067a8a-5bfcac4fb1be62e9.js","802","static/chunks/d709487a-8b04f0f7982383f9.js","975","static/chunks/975-42db6d55523e5280.js","592","static/chunks/592-a900d46e309f5add.js","460","static/chunks/460-420dcc5c1c246801.js","877","static/chunks/app/%5B...slug%5D/page-10f899e3dcceb682.js"],"IconMittwald"]
@@ -1101,7 +1101,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-15:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+15:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -1316,9 +1316,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen
@@ -3168,7 +3166,7 @@ import { sleepLong } from "@/content/03-components/actions/action/examples/lib";
     </ActionGroup>
   </Modal>
 </ModalTrigger>;
-da:T34e7,import Modal from "@mittwald/flow-react-components/Modal";
+da:T34c4,import Modal from "@mittwald/flow-react-components/Modal";
 import Content from "@mittwald/flow-react-components/Content";
 import Text from "@mittwald/flow-react-components/Text";
 import TextField from "@mittwald/flow-react-components/TextField";
@@ -3383,9 +3381,7 @@ export default () => {
         <ActionGroup>
           <Action closeOverlay>
             <Action action={sleepLong}>
-              <Button color="accent">
-                Ticket erstellen
-              </Button>
+              <Button color="accent">Server buchen</Button>
             </Action>
             <Button variant="soft" color="secondary">
               Abbrechen